diff --git a/discojs/src/models/onnx.ts b/discojs/src/models/onnx.ts
index 8227b1ebd..449beb039 100644
--- a/discojs/src/models/onnx.ts
+++ b/discojs/src/models/onnx.ts
@@ -1,14 +1,17 @@
-import { AutoModelForCausalLM, PreTrainedModel, Tensor } from '@xenova/transformers';
-import { Model } from './index.js';
-import type { WeightsContainer } from '../index.js';
-import { List } from 'immutable';
-import type { CausalLMOutput} from '@xenova/transformers';
-import type { GenerationConfig as TFJSGenerationConfig } from './gpt/config.js';
-import { DefaultGenerationConfig } from './gpt/config.js';
+import {
+  AutoModelForCausalLM,
+  PreTrainedModel,
+  Tensor,
+} from "@xenova/transformers";
+import { Model } from "./index.js";
+import type { WeightsContainer } from "../index.js";
+import { List } from "immutable";
+import type { CausalLMOutput } from "@xenova/transformers";
+import type { GenerationConfig as TFJSGenerationConfig } from "./gpt/config.js";
+import { DefaultGenerationConfig } from "./gpt/config.js";
 import type { Batched, DataFormat } from "../index.js";
 
-
-export class ONNXModel extends Model<'text'> {
+export class ONNXModel extends Model<"text"> {
   private model: PreTrainedModel;
 
   private constructor(model: PreTrainedModel) {
@@ -16,12 +19,12 @@ export class ONNXModel extends Model<'text'> {
     this.model = model;
   }
 
-  static async init_pretrained(modelName = 'Xenova/gpt2'): Promise<ONNXModel> {
+  static async init_pretrained(modelName = "Xenova/gpt2"): Promise<ONNXModel> {
     const model = await AutoModelForCausalLM.from_pretrained(modelName);
     return new ONNXModel(model);
   }
 
-  getConfig(): Record<string, unknown> {
+  get config(): Record<string, unknown> {
     return this.model.config as Record<string, unknown>;
   }
 
@@ -30,62 +33,76 @@ export class ONNXModel extends Model<'text'> {
     options?: Partial<TFJSGenerationConfig>
   ): Promise<Batched<DataFormat.ModelEncoded["text"][1]>> {
     const config = Object.assign({}, DefaultGenerationConfig, options);
-  
+
     return List(
       await Promise.all(
-        batch.map(tokens => this.#predictSingle(tokens, config))
+        batch.map((tokens) => this.#predictSingle(tokens, config))
       )
     );
   }
-  
 
   async #predictSingle(
     tokens: DataFormat.ModelEncoded["text"][0],
     config: TFJSGenerationConfig
   ): Promise<DataFormat.ModelEncoded["text"][1]> {
-    const contextLength = (this.model.config as { max_position_embeddings?: number }).max_position_embeddings ?? 1024;
+    const contextLength =
+      (this.model.config as { max_position_embeddings?: number })
+        .max_position_embeddings ?? 1024;
     const truncated = tokens.slice(-contextLength).toArray();
-  
+
     if (truncated.length === 0) {
-      throw new Error('Token list is empty. Cannot run generate().');
+      throw new Error("Token list is empty. Cannot run generate().");
     }
-  
-    const input_ids = new Tensor('int64', truncated.map(BigInt), [1, truncated.length]);
-  
-    const output = await this.model.generate(input_ids, {
+
+    const input_ids = new Tensor("int64", truncated.map(BigInt), [
+      1,
+      truncated.length,
+    ]);
+
+    const output = (await this.model.generate(input_ids, {
       max_new_tokens: 1,
       temperature: config.temperature,
       do_sample: config.doSample,
       top_k: config.topk,
-    }) as number[][];
-  
-    if (!Array.isArray(output) || output.length === 0 || !Array.isArray(output[0])) {
-      throw new Error('ONNX model.generate() did not return valid sequences.');
-    }   
-  
+    })) as number[][];
+
+    if (
+      !Array.isArray(output) ||
+      output.length === 0 ||
+      !Array.isArray(output[0])
+    ) {
+      throw new Error("ONNX model.generate() did not return valid sequences.");
+    }
+
     const predicted_id = output[0].at(-1) as number;
     return Number(predicted_id);
-
   }
-  
-
 
   async getLogits(batch: List<List<number>>): Promise<Tensor> {
-    const input_ids_array: number[][] = batch.toArray().map(seq => seq.toArray());
+    const input_ids_array: number[][] = batch
+      .toArray()
+      .map((seq) => seq.toArray());
     const attention_mask_array: number[][] = input_ids_array.map(
       (seq): number[] => new Array<number>(seq.length).fill(1)
     );
-      
+
     const input_ids_flat = input_ids_array.flat();
     const attention_mask_flat = attention_mask_array.flat();
     const shape = [input_ids_array.length, input_ids_array[0].length];
-  
+
     // use BigInt for int64 compatibility
-    const input_ids = new Tensor('int64', input_ids_flat.map(BigInt), shape);
-    const attention_mask = new Tensor('int64', attention_mask_flat.map(BigInt), shape);
+    const input_ids = new Tensor("int64", input_ids_flat.map(BigInt), shape);
+    const attention_mask = new Tensor(
+      "int64",
+      attention_mask_flat.map(BigInt),
+      shape
+    );
 
     // run model forward
-    const outputs = await this.model.forward({ input_ids, attention_mask }) as CausalLMOutput;
+    const outputs = (await this.model.forward({
+      input_ids,
+      attention_mask,
+    })) as CausalLMOutput;
     return outputs.logits;
   }
 
@@ -93,18 +110,19 @@ export class ONNXModel extends Model<'text'> {
     await Promise.resolve(); // dummy await
     const yieldFlag = false;
     if (yieldFlag) yield undefined as never; // satisfy 'require-yield'
-    throw new Error('Training not supported for ONNX models');
+    throw new Error("Training not supported for ONNX models");
   }
 
   get weights(): WeightsContainer {
-    throw new Error('Weights access not supported in ONNX models');
+    throw new Error("Weights access not supported in ONNX models");
   }
 
   set weights(_: WeightsContainer) {
-    throw new Error('Weights setting not supported in ONNX models');
+    throw new Error("Weights setting not supported in ONNX models");
   }
 
   [Symbol.dispose](): void {
     // Dispose of the model to free up memory
-    void this.model.dispose();}
+    void this.model.dispose();
+  }
 }
diff --git a/package-lock.json b/package-lock.json
index 52b95cdc7..daa6993c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4789,9 +4789,9 @@
 			}
 		},
 		"node_modules/caniuse-lite": {
-			"version": "1.0.30001727",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
-			"integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
+			"version": "1.0.30001764",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001764.tgz",
+			"integrity": "sha512-9JGuzl2M+vPL+pz70gtMF9sHdMFbY9FJaQBi186cHKH3pSzDvzoUJUPV6fqiKIMyXbud9ZLg4F3Yza1vJ1+93g==",
 			"dev": true,
 			"funding": [
 				{
diff --git a/webapp/src/assets/svg/CleanIcon.vue b/webapp/src/assets/svg/CleanIcon.vue
new file mode 100644
index 000000000..864c91f87
--- /dev/null
+++ b/webapp/src/assets/svg/CleanIcon.vue
@@ -0,0 +1,24 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    :class="customClass"
+    :viewBox="viewBox"
+    stroke="currentColor"
+  >
+    <path
+      d="M210.5 480L333.5 480L398.8 414.7L225.3 241.2L98.6 367.9L210.6 479.9zM256 544L210.5 544C193.5 544 177.2 537.3 165.2 525.3L49 409C38.1 398.1 32 383.4 32 368C32 352.6 38.1 337.9 49 327L295 81C305.9 70.1 320.6 64 336 64C351.4 64 366.1 70.1 377 81L559 263C569.9 273.9 576 288.6 576 304C576 319.4 569.9 334.1 559 345L424 480L544 480C561.7 480 576 494.3 576 512C576 529.7 561.7 544 544 544L256 544z"
+    />
+  </svg>
+</template>
+<script lang="ts">
+export default {
+  props: {
+    customClass: {
+      default: "w-6 h-6",
+      type: String,
+    },
+    viewBox: { default: "0 0 640 640", type: String },
+  },
+};
+</script>
diff --git a/webapp/src/assets/svg/MessageArrow.vue b/webapp/src/assets/svg/MessageArrow.vue
new file mode 100644
index 000000000..9db1de518
--- /dev/null
+++ b/webapp/src/assets/svg/MessageArrow.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    :class="customClass"
+    :viewBox="viewBox"
+  >
+    <path
+      d="M214.6 17.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 117.3 160 488c0 17.7 14.3 32 32 32s32-14.3 32-32l0-370.7 105.4 105.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
+    />
+  </svg>
+</template>
+<script lang="ts">
+export default {
+  props: {
+    customClass: {
+      default: "w-6 h-6",
+      type: String,
+    },
+    viewBox: { default: "-60 0 512 512", type: String },
+  },
+};
+</script>
diff --git a/webapp/src/assets/svg/StopIcon.vue b/webapp/src/assets/svg/StopIcon.vue
new file mode 100644
index 000000000..72148ac0c
--- /dev/null
+++ b/webapp/src/assets/svg/StopIcon.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    :class="customClass"
+    :viewBox="viewBox"
+  >
+    <path
+      d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM256 224L384 224C401.7 224 416 238.3 416 256L416 384C416 401.7 401.7 416 384 416L256 416C238.3 416 224 401.7 224 384L224 256C224 238.3 238.3 224 256 224z"
+    />
+  </svg>
+</template>
+<script lang="ts">
+export default {
+  props: {
+    customClass: {
+      default: "w-7 h-7",
+      type: String,
+    },
+    viewBox: { default: "0 0 640 640", type: String },
+  },
+};
+</script>
diff --git a/webapp/src/components/testing/Benchmarcks.vue b/webapp/src/components/testing/Benchmarcks.vue
new file mode 100644
index 000000000..1eeb5c8b3
--- /dev/null
+++ b/webapp/src/components/testing/Benchmarcks.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>Benchmarks</h1>
+</template>
diff --git a/webapp/src/components/testing/Chat.vue b/webapp/src/components/testing/Chat.vue
new file mode 100644
index 000000000..b8c364e06
--- /dev/null
+++ b/webapp/src/components/testing/Chat.vue
@@ -0,0 +1,589 @@
+<template>
+  <div class="flex h-full flex-col lg:flex-row">
+    <!-- Main Content -->
+    <div class="flex flex-col flex-1 order-2 lg:order-1">
+      <div class="mx-4 sm:mx-6 md:mx-8 lg:mx-10 xl:mx-12 mt-2">
+        <p
+          class="font-disco text-xl lg:text-2xl font-bold text-heading-light dark:text-heading-dark"
+        >
+          Experiment with text completion — discover how language models predict
+          the next word
+        </p>
+      </div>
+
+      <!-- Display Textarea (Read-only) -->
+      <div
+        class="flex-1 mx-4 sm:mx-6 md:mx-8 lg:mx-10 xl:mx-12 my-4 flex flex-col relative"
+      >
+        <!-- Highlight overlay -->
+        <div
+          ref="highlightOverlayRef"
+          class="absolute top-0 left-0 rounded-lg p-3 pointer-events-none overflow-y-auto text-sm lg:text-base text-transparent font-normal z-10"
+          style="
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            line-height: 1.5;
+            font-family: inherit;
+            width: calc(100% - 1.5rem);
+            max-width: 100%;
+          "
+        >
+          <template v-for="(segment, index) in textSegments" :key="index">
+            <span v-if="!segment.isGenerated" class="text-transparent">{{
+              segment.text
+            }}</span>
+            <span v-else class="bg-disco-cyan text-transparent">{{
+              segment.text
+            }}</span>
+          </template>
+        </div>
+
+        <textarea
+          v-model="textContent"
+          :disabled="true"
+          ref="textareaRef"
+          @scroll="syncScroll"
+          class="w-full h-full min-h-[300px] lg:min-h-0 rounded-lg p-3 border-2 border-disco-cyan/50 dark:border-disco-cyan/60 bg-white dark:bg-gray-900 text-disco-dark-blue dark:text-white resize-none focus:outline-none focus:ring-1 focus:ring-disco-cyan overflow-y-auto disabled:opacity-75 disabled:cursor-not-allowed relative z-20 hover:border-disco-cyan/80 dark:hover:border-disco-cyan/80 font-normal transition-all duration-200 text-sm lg:text-base cursor-default"
+          :class="{
+            'text-disco-dark-blue/50 dark:text-white/50':
+              textContent.length === 0,
+          }"
+          placeholder="Text will appear here..."
+          style="line-height: 1.5"
+        />
+
+        <!-- Clear Button (Bottom Right) -->
+        <button
+          @click="clearTextarea()"
+          class="absolute bottom-3 right-3 p-2 rounded-lg text-disco-cyan hover:text-disco-cyan/80 transition-colors duration-200 focus:outline-none z-20"
+          title="Clear textarea"
+        >
+          <CleanIcon class="w-5 h-5" />
+        </button>
+      </div>
+
+      <!-- Input Field with Buttons -->
+      <div
+        class="mx-4 sm:mx-6 md:mx-8 lg:mx-10 xl:mx-12 mb-4 flex flex-col relative"
+      >
+        <div class="relative">
+          <!-- Input Field -->
+          <input
+            v-model="inputText"
+            :disabled="isGenerating"
+            @keydown.enter="
+              (e) => {
+                if (!e.shiftKey) {
+                  e.preventDefault();
+                  addClickToTextarea();
+                }
+              }
+            "
+            type="text"
+            class="w-full px-3 py-2.5 pr-20 rounded-lg border-2 border-disco-cyan/50 dark:border-disco-cyan/60 bg-white dark:bg-gray-900 text-disco-dark-blue dark:text-disco-light-cyan resize-none focus:outline-none focus:ring-1 focus:ring-disco-cyan disabled:opacity-75 disabled:cursor-not-allowed hover:border-disco-cyan/80 dark:hover:border-disco-cyan/80 font-normal transition-all duration-200 text-sm lg:text-base"
+            :class="{
+              'text-disco-dark-blue/50 dark:text-disco-light-cyan/50':
+                inputText.length === 0,
+            }"
+            placeholder="Enter text here..."
+          />
+
+          <!-- Right Side Buttons (Overlay) -->
+          <div
+            class="absolute right-3 top-1/2 -translate-y-1/2 flex gap-2 z-20 pointer-events-auto"
+          >
+            <button
+              @click="isGenerating ? stopGeneration() : addClickToTextarea()"
+              :disabled="!inputText.trim() && !isGenerating"
+              class="p-2 rounded-lg text-disco-cyan hover:text-disco-cyan/80 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 focus:outline-none"
+              :title="isGenerating ? 'Stop' : 'Generate'"
+            >
+              <MessageArrow v-if="!isGenerating" class="w-5 h-5" />
+              <StopIcon v-else class="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="sticky bottom-0 mx-4 sm:mx-6 md:mx-8 lg:mx-10 xl:mx-12 mb-4"
+      />
+    </div>
+
+    <!-- Sidebar -->
+    <div
+      class="w-full lg:w-80 xl:w-96 bg-gray-50 dark:bg-gray-800 border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700 rounded-none lg:rounded-xl p-4 sm:p-6 m-0 lg:m-2 flex flex-col order-1 lg:order-2 max-h-[40vh] lg:max-h-none overflow-y-auto lg:overflow-y-visible"
+    >
+      <!-- Collapsible header for mobile -->
+      <div class="lg:hidden">
+        <button
+          @click="sidebarExpanded = !sidebarExpanded"
+          class="w-full flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded-lg mb-4"
+        >
+          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
+            Model Parameters
+          </h3>
+          <svg
+            :class="{ 'rotate-180': sidebarExpanded }"
+            class="w-5 h-5 transform transition-transform duration-200 text-gray-600 dark:text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Desktop header -->
+      <h3
+        class="hidden lg:block text-xl font-semibold text-gray-800 dark:text-gray-200 mb-6"
+      >
+        Model Parameters
+      </h3>
+
+      <!-- Model Type Selector -->
+      <div
+        class="mb-6 p-4 bg-gradient-to-br from-disco-cyan/5 to-disco-cyan/10 dark:from-disco-cyan/10 dark:to-disco-cyan/20 border border-disco-cyan/30 dark:border-disco-cyan/40 rounded-lg"
+      >
+        <label
+          class="block text-sm font-semibold text-disco-cyan dark:text-disco-cyan mb-3"
+        >
+          Model Type
+        </label>
+        <select
+          v-model="selectedModelType"
+          class="w-full px-4 py-2.5 border-2 border-disco-cyan/50 dark:border-disco-cyan/60 bg-white dark:bg-gray-900 text-disco-cyan dark:text-disco-cyan rounded-lg transition-all duration-200 hover:border-disco-cyan/80 dark:hover:border-disco-cyan/80 font-semibold"
+        >
+          <option value="gpt" class="bg-white dark:bg-gray-900 text-disco-cyan">
+            GPT Model
+          </option>
+          <option
+            value="onnx"
+            class="bg-white dark:bg-gray-900 text-disco-cyan"
+          >
+            ONNX Model
+          </option>
+        </select>
+      </div>
+
+      <!-- Parameters section -->
+      <div
+        :class="{ hidden: !sidebarExpanded }"
+        class="lg:block space-y-4 lg:space-y-6 flex-1"
+      >
+        <!-- Temperature -->
+        <div class="space-y-2 lg:space-y-3">
+          <label
+            class="block text-sm lg:text-base font-medium text-gray-700 dark:text-gray-300"
+          >
+            Temperature
+          </label>
+          <div class="flex items-center space-x-2 lg:space-x-3">
+            <input
+              type="range"
+              v-model.number="parameters.temperature"
+              min="0"
+              max="2.0"
+              step="0.1"
+              class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-600 accent-disco-cyan"
+            />
+            <span
+              class="text-sm lg:text-base text-gray-600 dark:text-gray-400 w-10 lg:w-12 text-right"
+            >
+              {{ parameters.temperature }}
+            </span>
+          </div>
+          <p class="text-xs lg:text-sm text-gray-500 dark:text-gray-400">
+            Controls randomness in generation (0 = focused, 2.0 = creative)
+          </p>
+        </div>
+
+        <!-- Do Sample Checkbox -->
+        <div class="mb-6">
+          <label class="flex items-center space-x-3 cursor-pointer">
+            <input
+              type="checkbox"
+              v-model="parameters.doSample"
+              class="w-4 h-4 accent-disco-cyan rounded"
+            />
+            <span
+              class="text-sm lg:text-base font-medium text-gray-700 dark:text-gray-300"
+            >
+              Do Sample
+            </span>
+          </label>
+          <p
+            class="text-xs lg:text-sm text-gray-500 dark:text-gray-400 mt-2 ml-7"
+          >
+            Enable sampling for more diverse predictions
+          </p>
+        </div>
+        <!-- Top-k -->
+        <div class="space-y-2 lg:space-y-3">
+          <label
+            class="block text-sm lg:text-base font-medium text-gray-700 dark:text-gray-300"
+            :title="
+              !parameters.doSample
+                ? 'Disabled: Enable sampling to use this parameter'
+                : ''
+            "
+          >
+            Top-k
+          </label>
+          <div class="flex items-center space-x-2 lg:space-x-3 relative">
+            <div
+              v-if="!parameters.doSample"
+              class="absolute inset-0 rounded-lg cursor-not-allowed group z-10"
+              :title="'Enable sampling to use this parameter'"
+            >
+              <div
+                class="absolute inset-0 rounded-lg bg-transparent hover:bg-gray-400/5 transition-colors duration-200"
+              />
+            </div>
+            <input
+              type="range"
+              v-model="parameters.topK"
+              min="1"
+              max="100"
+              step="1"
+              :disabled="!parameters.doSample"
+              class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-600 accent-disco-cyan disabled:opacity-50 disabled:cursor-not-allowed"
+            />
+            <span
+              class="text-sm lg:text-base text-gray-600 dark:text-gray-400 w-10 lg:w-12 text-right"
+            >
+              {{ parameters.topK }}
+            </span>
+          </div>
+          <p class="text-xs lg:text-sm text-gray-500 dark:text-gray-400">
+            Consider only top-k most likely tokens
+          </p>
+        </div>
+
+        <!-- Max Tokens -->
+        <div class="space-y-2 lg:space-y-3">
+          <label
+            class="block text-sm lg:text-base font-medium text-gray-700 dark:text-gray-300"
+          >
+            Max Tokens
+          </label>
+          <div class="flex items-center space-x-2 lg:space-x-3">
+            <input
+              type="range"
+              v-model="parameters.maxTokens"
+              min="1"
+              max="200"
+              step="1"
+              class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-600 accent-disco-cyan"
+            />
+            <span
+              class="text-sm lg:text-base text-gray-600 dark:text-gray-400 w-10 lg:w-12 text-right"
+            >
+              {{ parameters.maxTokens }}
+            </span>
+          </div>
+          <p class="text-xs lg:text-sm text-gray-500 dark:text-gray-400">
+            Maximum number of tokens to generate
+          </p>
+        </div>
+      </div>
+
+      <!-- Buttons -->
+      <div
+        :class="{ hidden: !sidebarExpanded }"
+        class="lg:block flex gap-2 mt-4"
+      >
+        <div class="hidden lg:flex lg:gap-4 lg:justify-center">
+          <CustomButton
+            @click="resetParameters()"
+            class="text-sm lg:text-base px-4 lg:px-6"
+          >
+            Reset
+          </CustomButton>
+          <CustomButton
+            @click="regenerateText()"
+            class="text-sm lg:text-base px-4 lg:px-6"
+          >
+            Regenerate
+          </CustomButton>
+        </div>
+        <div class="lg:hidden flex gap-2 justify-center">
+          <CustomButton @click="resetParameters()" class="flex-1 text-sm px-4">
+            Reset
+          </CustomButton>
+          <CustomButton @click="regenerateText()" class="flex-1 text-sm px-4">
+            Regenerate
+          </CustomButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup generic="D extends DataType">
+import { onMounted, ref, shallowRef, watch, reactive, computed } from "vue";
+import { useRoute } from "vue-router";
+import type { Model, DataType } from "@epfml/discojs";
+import MessageArrow from "@/assets/svg/MessageArrow.vue";
+import StopIcon from "@/assets/svg/StopIcon.vue";
+import { useModelsStore } from "@/store";
+import { Tokenizer } from "@epfml/discojs";
+import { List } from "immutable";
+import { models } from "@epfml/discojs";
+import CustomButton from "@/components/simple/CustomButton.vue";
+import CleanIcon from "@/assets/svg/CleanIcon.vue";
+
+interface ModelParameters {
+  temperature: number;
+  topK: number;
+  maxTokens: number;
+  doSample: boolean;
+}
+
+interface TextSegment {
+  text: string;
+  isGenerated: boolean;
+}
+
+const textareaRef = ref<HTMLTextAreaElement>();
+const highlightOverlayRef = ref<HTMLDivElement>();
+
+const syncScroll = () => {
+  if (textareaRef.value && highlightOverlayRef.value) {
+    highlightOverlayRef.value.scrollTop = textareaRef.value.scrollTop;
+    highlightOverlayRef.value.scrollLeft = textareaRef.value.scrollLeft;
+  }
+};
+
+const textSegments = ref<TextSegment[]>([]);
+const textContent = ref("");
+const inputText = ref("");
+const lastUserInput = ref("");
+const modelsStore = useModelsStore();
+const model = shallowRef<models.GPT | null>(null);
+const onnxModel = shallowRef<models.ONNXModel | null>(null);
+const route = useRoute();
+const sidebarExpanded = ref(false);
+const selectedModelType = ref<"gpt" | "onnx">("gpt");
+const isGenerating = ref(false);
+const shouldStopGeneration = ref(false);
+
+const tokenizer = ref<Tokenizer | null>(null);
+
+const parameters = reactive<ModelParameters>({
+  temperature: 1.0,
+  topK: 50,
+  maxTokens: 50,
+  doSample: true,
+});
+
+const stopGeneration = () => {
+  shouldStopGeneration.value = true;
+  isGenerating.value = false;
+};
+
+const clearInput = () => {
+  inputText.value = "";
+};
+
+const clearTextarea = () => {
+  textContent.value = "";
+  textSegments.value = [];
+  lastUserInput.value = "";
+};
+
+const addClickToTextarea = async () => {
+  if (!inputText.value.trim()) return;
+
+  try {
+    isGenerating.value = true;
+    shouldStopGeneration.value = false;
+
+    const prefix = textContent.value ? "\n" : "";
+    textContent.value += prefix + inputText.value.trim();
+
+    textSegments.value.push({
+      text: prefix + inputText.value.trim(),
+      isGenerated: false,
+    });
+
+    const tokenizer = await Tokenizer.from_pretrained("Xenova/gpt2");
+    let tokens = tokenizer.tokenize(textContent.value.trim());
+
+    const selectedModel =
+      selectedModelType.value === "gpt" ? model.value : onnxModel.value;
+
+    if (!selectedModel) {
+      textContent.value += `\nError: ${selectedModelType.value.toUpperCase()} model not loaded`;
+      return;
+    }
+
+    try {
+      lastUserInput.value = textContent.value.trim();
+      let generatedToken = "";
+
+      const predictionOptions = {
+        temperature: parameters.temperature,
+        topK: parameters.topK,
+      };
+
+      for (let n = 0; n < parameters.maxTokens; n++) {
+        if (shouldStopGeneration.value) {
+          break;
+        }
+
+        const next = (
+          await selectedModel.predict(List.of(tokens), predictionOptions)
+        ).first();
+
+        if (next === undefined) {
+          break;
+        }
+        tokens = tokens.push(next);
+
+        const decodedToken = tokenizer.decode([next]);
+        textContent.value += decodedToken;
+        generatedToken += decodedToken;
+      }
+
+      if (generatedToken) {
+        textSegments.value.push({
+          text: generatedToken,
+          isGenerated: true,
+        });
+      }
+    } catch (error) {
+      console.error("Error predicting tokens:", error);
+      textContent.value += `\nError: Failed to predict tokens`;
+    }
+  } catch (error) {
+    console.error("Error tokenizing:", error);
+    textContent.value += `\nError: Failed to tokenize text`;
+  } finally {
+    isGenerating.value = false;
+    shouldStopGeneration.value = false;
+    inputText.value = "";
+    if (textareaRef.value) {
+      textareaRef.value.scrollTop = textareaRef.value.scrollHeight;
+    }
+  }
+};
+
+const regenerateText = async () => {
+  const selectedModel =
+    selectedModelType.value === "gpt" ? model.value : onnxModel.value;
+
+  if (!selectedModel) {
+    console.error(`${selectedModelType.value.toUpperCase()} model not loaded`);
+    return;
+  }
+
+  if (!lastUserInput.value.trim()) {
+    console.warn("No previous input to regenerate from");
+    return;
+  }
+
+  try {
+    isGenerating.value = true;
+    shouldStopGeneration.value = false;
+
+    const tokenizer = await Tokenizer.from_pretrained("Xenova/gpt2");
+    textContent.value = lastUserInput.value;
+
+    if (textSegments.value[textSegments.value.length - 1]?.isGenerated) {
+      textSegments.value.pop();
+    }
+
+    let tokens = tokenizer.tokenize(lastUserInput.value.trim());
+    let generatedToken = "";
+
+    const predictionOptions = {
+      temperature: parameters.temperature,
+      topK: parameters.topK,
+    };
+
+    for (let n = 0; n < parameters.maxTokens; n++) {
+      if (shouldStopGeneration.value) {
+        break;
+      }
+
+      const next = (
+        await selectedModel.predict(List.of(tokens), predictionOptions)
+      ).first();
+
+      if (next === undefined) {
+        break;
+      }
+      tokens = tokens.push(next);
+
+      const decodedToken = tokenizer.decode([next]);
+      textContent.value += decodedToken;
+      generatedToken += decodedToken;
+    }
+
+    if (generatedToken) {
+      textSegments.value.push({
+        text: generatedToken,
+        isGenerated: true,
+      });
+    }
+  } catch (error) {
+    console.error("Error regenerating text:", error);
+    textContent.value += `\nError: Failed to regenerate text`;
+  } finally {
+    isGenerating.value = false;
+    shouldStopGeneration.value = false;
+    if (textareaRef.value) {
+      textareaRef.value.scrollTop = textareaRef.value.scrollHeight;
+    }
+  }
+};
+
+watch(
+  () => parameters.doSample,
+  (newValue) => {
+    if (!newValue) {
+      parameters.temperature = 0;
+    } else {
+      parameters.temperature = 1;
+    }
+  },
+);
+
+watch(
+  () => parameters.temperature,
+  (newValue) => {
+    if (newValue === 0) {
+      parameters.doSample = false;
+    } else if (newValue > 0) {
+      parameters.doSample = true;
+    }
+  },
+);
+
+const resetParameters = () => {
+  parameters.temperature = 1.0;
+  parameters.topK = 50;
+  parameters.maxTokens = 50;
+};
+
+onMounted(async () => {
+  const modelID = Number(route.query.modelID);
+  const loadedModel = await modelsStore.get(modelID);
+  if (loadedModel !== undefined) {
+    model.value = loadedModel as models.GPT;
+  }
+
+  onnxModel.value = await models.ONNXModel.init_pretrained("Xenova/gpt2");
+});
+
+const generatedText = computed(() => {
+  return textContent.value.slice(lastUserInput.value.length);
+});
+</script>
diff --git a/webapp/src/components/testing/ModelLibrary.vue b/webapp/src/components/testing/ModelLibrary.vue
index e9219f356..fd3bb07b5 100644
--- a/webapp/src/components/testing/ModelLibrary.vue
+++ b/webapp/src/components/testing/ModelLibrary.vue
@@ -23,10 +23,15 @@
             >
               <ButtonsCard
                 :buttons="
-                  List.of(
-                    ['test', () => selectModel(id, 'test')],
-                    ['predict', () => selectModel(id, 'predict')],
-                  )
+                  infos.taskID === 'llm_task'
+                    ? List.of(
+                        ['to chat', () => goToChat(id)],
+                        ['evaluate', () => goToBenchmarks()],
+                      )
+                    : List.of(
+                        ['test', () => selectModel(id, 'test')],
+                        ['predict', () => selectModel(id, 'predict')],
+                      )
                 "
                 class="shadow-sm border dark:border-gray-700 dark:shadow-gray-700"
               >
@@ -163,6 +168,7 @@ import type { ModelID } from "@/store";
 import { useModelsStore } from "@/store";
 import { useTasksStore } from "@/store";
 import { useValidationStore } from "@/store";
+import { useRouter } from "vue-router";
 
 import ButtonsCard from "@/components/containers/ButtonsCard.vue";
 import IconCard from "@/components/containers/IconCard.vue";
@@ -172,12 +178,14 @@ import DISCOllaboratives from "@/components/simple/DISCOllaboratives.vue";
 
 import TestSteps from "./TestSteps.vue";
 import PredictSteps from "./PredictSteps.vue";
+import { isDebuggerStatement } from "typescript";
 
 const debug = createDebug("webapp:ModelLibrary");
 const validationStore = useValidationStore();
 const models = useModelsStore();
 const { tasks } = storeToRefs(useTasksStore());
 const toaster = useToaster();
+const router = useRouter();
 
 type Selection<D extends DataType> = {
   mode: "predict" | "test";
@@ -307,4 +315,13 @@ function taskTitle(taskID: string): string | undefined {
 
   return titled.displayInformation.title;
 }
+
+const goToChat = (modelID: ModelID): void => {
+  validationStore.step = 0;
+  router.push({ path: "/chat", query: { modelID } });
+};
+
+const goToBenchmarks = (): void => {
+  router.push({ path: "/benchmarks" });
+};
 </script>
diff --git a/webapp/src/router/router.ts b/webapp/src/router/router.ts
index 68d6dea7b..c07338b7a 100644
--- a/webapp/src/router/router.ts
+++ b/webapp/src/router/router.ts
@@ -1,16 +1,18 @@
 import createDebug from "debug";
-import { createRouter, createWebHashHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from "vue-router";
 import { scrollToTop } from "@/utils";
 
-import TrainingBar from '@/components/progress_bars/TrainingBar.vue'
-import TestingBar from '@/components/progress_bars/TestingBar.vue'
-import HomePage from '@/components/pages/HomePage.vue'
-import TaskCreationForm from '@/components/task_creation_form/TaskCreationForm.vue'
-import TaskList from '@/components/pages/TaskList.vue'
-import NotFound from '@/components/pages/NotFound.vue'
-import Training from '@/components/training/TrainingSteps.vue'
-import ModelLibrary from '@/components/testing/ModelLibrary.vue'
-import AboutUs from '@/components/pages/AboutUs.vue'
+import TrainingBar from "@/components/progress_bars/TrainingBar.vue";
+import TestingBar from "@/components/progress_bars/TestingBar.vue";
+import HomePage from "@/components/pages/HomePage.vue";
+import TaskCreationForm from "@/components/task_creation_form/TaskCreationForm.vue";
+import TaskList from "@/components/pages/TaskList.vue";
+import NotFound from "@/components/pages/NotFound.vue";
+import Training from "@/components/training/TrainingSteps.vue";
+import ModelLibrary from "@/components/testing/ModelLibrary.vue";
+import AboutUs from "@/components/pages/AboutUs.vue";
+import Chat from "@/components/testing/Chat.vue";
+import Benchmarks from "@/components/testing/Benchmarcks.vue";
 
 const debug = createDebug("webapp:router");
 
@@ -21,70 +23,84 @@ const router = createRouter({
     // Because router is wrapped in a BaseLayout, returning { top: 0 } doesn't do anything
     // https://github.com/vuejs/vue-router/issues/3451#issuecomment-975637797
     scrollToTop();
-    return { top: 0 }
+    return { top: 0 };
   },
   routes: [
     {
-      path: '/',
-      name: 'HomePage',
-      component: HomePage
+      path: "/",
+      name: "HomePage",
+      component: HomePage,
     },
     {
-      path: '/create',
-      name: 'task-creation-form',
-      component: TaskCreationForm
+      path: "/create",
+      name: "task-creation-form",
+      component: TaskCreationForm,
     },
     {
-      path: '/about',
-      name: 'about',
-      component: AboutUs
+      path: "/about",
+      name: "about",
+      component: AboutUs,
     },
     {
-      path: '/list',
-      name: 'task-list',
+      path: "/list",
+      name: "task-list",
       components: {
         default: TaskList,
-        ProgressBar: TrainingBar
-      }
+        ProgressBar: TrainingBar,
+      },
     },
     {
-      path: '/evaluate',
-      name: 'evaluate',
+      path: "/evaluate",
+      name: "evaluate",
       components: {
         default: ModelLibrary,
-        ProgressBar: TestingBar
-      }
+        ProgressBar: TestingBar,
+      },
     },
     {
-      path: '/:id',
+      path: "/:id",
       components: {
         default: Training,
-        ProgressBar: TrainingBar
+        ProgressBar: TrainingBar,
       },
       props: {
         default: true,
-        ProgressBar: false
-      }
+        ProgressBar: false,
+      },
+    },
+    {
+      path: "/chat",
+      name: "chat",
+      components: {
+        default: Chat,
+      },
+    },
+    {
+      path: "/benchmarks",
+      name: "benchmarks",
+      components: {
+        default: () => Benchmarks,
+      },
     },
     {
-      path: '/:pathMatch(.*)*',
-      name: 'not-found',
-      component: NotFound
+      path: "/:pathMatch(.*)*",
+      name: "not-found",
+      component: NotFound,
     },
     {
-      path: '/not-found',
-      name: 'not-found',
-      component: NotFound
-    }
-  ]
-})
+      path: "/not-found",
+      name: "not-found",
+      component: NotFound,
+    },
+  ],
+});
 
 // Handle router errors
 router.onError((err) => {
   // Handle the router error here
   debug("router error: %o", err);
   // Add code for reporting or other error handling logic
-  void router.push({ path: '/not-found' })
-})
+  void router.push({ path: "/not-found" });
+});
 
-export { router }
+export { router };