Semantic Synergy

/**

 * @license MIT

 * This code is licensed under the MIT License.

 * You can find a copy of the license at https://opensource.org/licenses/MIT.

 */

​

/**

 * The objective of the game is to create a third text segment that semantically connects to two provided text chunks. 

 * The evaluation of how well the third text relates to the initial ones is done through text embeddings, 

 * which provide a numerical representation of text based on its semantic content, and coherence analysis.

 */

​

// Variables for user input elements and the result display

let chunk1_input, chunk2_input, chunk3_input;

let analyzeButton;

let resultText = '';

​

let chunk1_default_text = "A Geometric Plane.";

let chunk2_default_text = "A Circle.";

let chunk3_default_text = "A Drawing Compass.";

​

let tokenizer;

let embeddingsFetcher;

​

// Create an instance of KnowledgeObject

let visualizationObjects = [];

let visualizationObjectsReady = false;

​

/**

 * Initializes the setup for the visualization objects.

 */

function setup() {

  // Create an instance of the Tokenizer class

  tokenizer = new Tokenizer();

  embeddingsFetcher = new EmbeddingsFetcher();

  // Initialize visualization objects

  initialize_visualizationObjects();

​

  // Create the UI that displays the three chunks of text.

  // chunk 1 and chunk 2 are the baseline

  // chunk 3 is user input

  // as the user input changes, the embeddings for the text change 

  // and a visualization of the relationship between the 3 texts is drawn

}

​

/**

 * Initializes the visualization objects.

 */

function initialize_visualizationObjects() {

  // Initialize content

  vizObj_01 = new VisualizationObject('content_01', 'anchor', chunk1_default_text, null, width / 3, height / 2);

  vizObj_02 = new VisualizationObject('content_02', 'anchor', chunk2_default_text, null, width * 2 / 3, height / 2);

  vizObj_03 = new VisualizationObject('content_03', 'comparison', chunk3_default_text, null, width / 2, height / 2);

  // Push to an array

  visualizationObjects.push(vizObj_01);

  visualizationObjects.push(vizObj_02);

  visualizationObjects.push(vizObj_03);

  updateVisualizationObjects();

}

​

/**

 * Updates the visualization objects with embeddings and token pairs.

 */

async function updateVisualizationObjects() {

  debugLog({updateVisualizationObjects_length:visualizationObjects.length});

  for (let i = 0; i < visualizationObjects.length; i++) {

    await updateEmbeddings(visualizationObjects[i]);

    await updateTokensFromText(visualizationObjects[i]);

  }

  // Once async functions return, visualizationObjects are ready.

  visualizationObjectsReady = true;

}

​

/**

 * Updates the text of the visualization object based on user input.

 * @param {VisualizationObject} targetVisualizationObject - The visualization object to update.

 * @param {string} inputTextID - The ID of the input text element.

 */

function updateVisualizationObjectText(targetVisualizationObject, inputTextID) {

  // Get the input text from the textArea

  debugLog({updateVisualizationObjectText_inputTextID:inputTextID});

  let inputElement = select(`#${inputTextID}`);

  let inputText = inputElement.value();

  debugLog({inputTextID:inputTextID, inputText:inputText});

  // Set the text for the visualization object

  targetVisualizationObject.setText(inputText);

}

​

/**

 * Displays debugging information on the canvas.

 */

function displayDebug() {

  // This is temporary debugging display

  background(220);

  // Display information about the KnowledgeObject

  textSize(12);

  fill(0);

  let x = 10;

  let y = 20;

  let x_increment = 300;

  let y_increment = 200;

  let index_compare = 0;

  for (let i = 0; i < visualizationObjects.length; i++) {

    let pos_x = x; //+(x_increment*i);

    let pos_y = y + (y_increment * i);

    text('VisualizationObject ID: ' + visualizationObjects[i].getId(), pos_x, pos_y);

    text('Text: ' + visualizationObjects[i].getText(), pos_x, pos_y + 20);

    text('Embedding Magnitude: ' + visualizationObjects[i].getEmbeddingMagnitude(), pos_x, pos_y + 40);

    text('Embedding Mean: ' + visualizationObjects[i].getEmbeddingMean(), pos_x, pos_y + 60);

    text('Embedding Median: ' + visualizationObjects[i].getEmbeddingMedian(), pos_x, pos_y + 80);

    text('Embedding StdDev: ' + visualizationObjects[i].getEmbeddingStandardDeviation(), pos_x, pos_y + 100);

    text('Embedding Length: ' + visualizationObjects[i].getEmbeddingValue().length, pos_x, pos_y + 120);

    //text('Embedding: ' + visualizationObjects[i].getEmbeddingValue(), pos_x, pos_y + 140);

    let similarity = 0;

    // Calculate and display cosine similarity with another vector

    index_compare = i + 1;

    if (index_compare >= visualizationObjects.length) {

      index_compare = index_compare - visualizationObjects.length;

    }

    similarity = visualizationObjects[i].cosineSimilarity(visualizationObjects[index_compare].getEmbeddingValue());

    text('Cosine Similarity: ' + similarity, pos_x, pos_y + 160);

  }

}

​

/**

 * Draws the canvas and updates the display.

 */

function draw() {

  // Create the canvas and set its position later

  mainCanvas = createCanvas(1200, 800);

  // Display a splash screen while waiting for first results

  background(128);

  // If results are ready, begin the game

  if (visualizationObjectsReady) {

    // Execute a function to test objects

    displayDebug();

  }

}

​