Spaces:

FrictionAI
/

SokratesAI

Sleeping

App Files Files Community

Alleinzellgaenger commited on Jul 24, 2025

Commit

9e51bdc

1 Parent(s): fcb8451

Created PDF upload functionality. A bit rough but works.

Browse files

Files changed (22) hide show

frontend/ model_view.js +0 -0
frontend/.DS_Store +0 -0
frontend/.gitignore +24 -0
frontend/README.md +12 -0
frontend/eslint.config.js +29 -0
frontend/index.html +12 -130
frontend/package-lock.json +0 -0
frontend/package.json +33 -0
frontend/postcss.config.js +6 -0
frontend/public/pdf.worker.min.js +0 -0
frontend/public/vite.svg +1 -0
frontend/script.js +0 -213
frontend/src/App.css +42 -0
frontend/src/App.jsx +16 -0
frontend/src/assets/react.svg +1 -0
frontend/src/components/Homepage.jsx +16 -0
frontend/src/components/UploadPage.jsx +61 -0
frontend/src/index.css +1 -0
frontend/src/main.jsx +10 -0
frontend/styles.css +0 -198
frontend/tailwind.config.js +11 -0
frontend/vite.config.js +7 -0

frontend/ model_view.js DELETED Viewed

File without changes

frontend/.DS_Store DELETED Viewed

Binary file (6.15 kB)

frontend/.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md ADDED Viewed

	@@ -0,0 +1,12 @@

+# React + Vite
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Currently, two official plugins are available:
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Expanding the ESLint configuration
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js ADDED Viewed

	@@ -0,0 +1,29 @@

+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

frontend/index.html CHANGED Viewed

@@ -1,131 +1,13 @@
-<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>DeepGaze</title>
-  <link rel="stylesheet" href="static/styles.css" />
-  <!-- Load D3 -->
-  <script src="https://d3js.org/d3.v6.min.js"></script>
-  <style>
-    /* Process button styling */
-    .text-form button {
-      background-color: #800000; /* Bordo red */
-      color: #fff;
-      border: none;
-      padding: 8px 12px;
-      font-size: 14px;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-    /* Info container styling for head and layer display */
-    .info-container {
-      display: flex;
-      align-items: center;
-      margin: 5px 0;
-      font-size: 0.9rem;
-    }
-    .info-container .label {
-      margin-right: 5px;
-    }
-    .info-container .number-box {
-      border: 1px solid #800000;
-      border-radius: 4px;
-      padding: 2px 6px;
-      font-weight: bold;
-      color: #800000;
-      min-width: 20px;
-      text-align: center;
-    }
-  </style>
-</head>
-<body>
-  <!-- Header -->
-  <header>
-    <h1>DeepGaze</h1>
-  </header>
-  <!-- Main container -->
-  <div class="container">
-    <main>
-      <!-- About Attention Section -->
-      <section class="about-section">
-        <h2>About Attention</h2>
-        <p>
-          Transformer networks (the architecture behind Chat-GPT) are built from multiple layers, and each layer is divided into several attention heads.
-          Each head computes its own attention matrix by combining "queries" and "keys"—the fundamental elements that help
-          the network decide how much focus to give to different parts of the input.
-        </p>
-        <p>
-          You can think of each query as a question that a token asks, such as "Are there adjectives in front of me?"
-          Meanwhile, each key serves as a potential answer, carrying the token's characteristics. When the model compares
-          queries with keys, it determines the strength of their match and, therefore, how much influence one token should
-          have on another.
-        </p>
-        <p>
-          For example, consider the phrase "fluffy blue monster." One token might generate a query like, "Is the word in front
-          of me an adjective?" In this case, the tokens "fluffy" and "blue"—which are adjectives—provide keys that answer this
-          question strongly, while "monster," being a noun, offers a weaker response. This interplay of questions (queries)
-          and answers (keys) is what creates the attention matrix for each head.
-        </p>
-        <p>
-          Each attention head focuses on different relationships and patterns within the text, allowing the network to capture
-          a rich and nuanced understanding of the language. Despite the critical role that these attention mechanisms play,
-          it's interesting to note that only about one third of all the weights in a large language model are actually in the
-          attention blocks. So while the famous slogan "attention is all you need" highlights the importance of these connections,
-          in terms of sheer weight, it's only one third of what you really need!
-        </p>
-        <p id="credits">Made with <3 by Ferdi & Samu. Credits for model view below to <a href="https://jessevig.com/" target="_blank">BertViz</a>.</p>
-      </section>
-      <!-- Deep Gaze into Attention Heads Section -->
-      <section class="deep-gaze-section">
-        <h2>A Deep Gaze into Attention Heads</h2>
-        <p>Type in a token sequence (below 50 characters) and hit process. After some loading time, you will be able to see the attention patterns of individual so-called "heads" in the LLM.
-          Each head focuses on different aspects of the input text, and by visualizing these patterns, you can gain insights into how the model processes and understands language.
-        </p>
-        <p>Here is an example view of a head, with tokens on each side. If you see a connection between two tokens, it means that the head is paying attention to the relationship between those tokens. This way you can see attention heads which "pay attention" to the previous token, the first token, or other patterns.
-          Click on an attention head to select the respective head in a layer. Afterwards you can hover over tokens to see the attention weights of the selected head for that token. </p>
-        <div id="thumbnailContainer"></div>
-        <!-- Text Input & Process Button -->
-        <form id="textForm" class="text-form">
-          <textarea id="inputText" rows="2" cols="50" maxlength="50" placeholder="Enter your text here..." autofocus></textarea>
-          <button type="submit">Process</button>
-        </form>
-      </section>
-      <!-- Model View Section -->
-      <section class="model_view">
-        <p>Click on a head that looks interesting to gaze deeper into it in the next section:</p>
-        <div id="model_view_container">
-          <!-- Thumbnails of attention heads will be rendered here -->
-        </div>
-        <!-- Display for selected head and layer -->
-        <div id="display_info">
-          <div id="display_head" class="info-container">
-            <span class="label">Head:</span>
-            <span class="number-box">-</span>
-          </div>
-          <div id="display_layer" class="info-container">
-            <span class="label">Layer:</span>
-            <span class="number-box">-</span>
-          </div>
-        </div>
-      </section>
-      <!-- Hover Visualization Section -->
-      <section class="hover-visualization">
-        <h2>Hover Visualization</h2>
-        <p>
-          By hovering over each token, you can see which other token is important for that token. The larger the token, the more important it is for the token you are hovering over. The token with the maximal attention is colored in red.
-        </p>
-        <div id="tokenContainer"></div>
-      </section>
-    </main>
-  </div>
-  <!-- External JavaScript (all event listeners and functions are defined here) -->
-  <script src="static/script.js?v=1111"></script>
-</body>
-</html>

+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

frontend/package.json ADDED Viewed

	@@ -0,0 +1,33 @@

+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-pdf": "^10.0.1",
+    "react-router-dom": "^7.7.0",
+    "tailwindcss": "^4.1.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "vite": "^7.0.4"
+  }
+}

frontend/postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+}

frontend/public/pdf.worker.min.js ADDED Viewed

The diff for this file is too large to render. See raw diff

frontend/public/vite.svg ADDED Viewed

frontend/script.js DELETED Viewed

@@ -1,213 +0,0 @@
-// Form submit handler 2.1
-document.getElementById('textForm').addEventListener('submit', async (e) => {
-  e.preventDefault();
-  const inputText = document.getElementById('inputText').value;
-  try {
-    const response = await fetch('/process', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ text: inputText })
-    });
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
-    }
-    const data = await response.json();
-    // Use data.tokens and data.attention from your POST response
-    // displayOutput(data);
-    displayHoverTokens(data, 0, 0);
-    // Changed call here to pass the entire data object
-    renderModelView(data);
-  } catch (error) {
-    console.error('Error:', error);
-    document.getElementById('output').innerText = 'Error processing text.';
-  }
-});
-function renderModelView(data) {
-  // Extract tokens and attention from the data object
-  const tokens = data.tokens;
-  const attention = data.attention;
-  const container = document.getElementById("model_view_container");
-  if (!container) return;
-  container.innerHTML = "";
-  const gridContainer = document.createElement("div");
-  gridContainer.style.display = "grid";
-  gridContainer.style.gridTemplateColumns = "repeat(12, 80px)";
-  gridContainer.style.gridGap = "10px";
-  gridContainer.style.padding = "20px";
-  // Loop over all 12 layers and 12 heads, passing the complete data object
-  for (let layerIdx = 0; layerIdx < 12; layerIdx++) {
-    for (let headIdx = 0; headIdx < 12; headIdx++) {
-      const thumbnail = createAttentionThumbnail(data, layerIdx, headIdx);
-      gridContainer.appendChild(thumbnail);
-    }
-  }
-  container.appendChild(gridContainer);
-}
-function createAttentionThumbnail(data, layerIdx, headIdx) {
-  // Extract tokens and attention from the data object
-  const tokens = data.tokens;
-  const attention = data.attention;
-  const width = 80;
-  const tokenHeight = 15;
-  const padding = 10;
-  // Compute the thumbnail height dynamically based on the number of tokens.
-  const height = padding * 2 + tokens.length * tokenHeight;
-  const maxLineWidth = 4;
-  const maxOpacity = 0.8;
-  // Compute the right-side x-coordinate numerically.
-  const xRight = width - padding;
-  // Create a thumbnail container using D3.
-  const thumbnail = d3.select(document.createElement("div"))
-    .style("position", "relative")
-    .style("height", height + "px")
-    .style("width", width + "px")
-    .style("border", "1px solid #ddd")
-    .style("border-radius", "4px")
-    .style("padding", "5px")
-    .style("background", "#fff");
-  // Append an SVG container with fixed dimensions.
-  const svg = thumbnail.append("svg")
-    .attr("width", width)
-    .attr("height", height);
-  // Add header text (e.g., "L4 H4") to show the layer and head number.
-  svg.append("text")
-    .attr("x", width / 2)
-    .attr("y", 15)
-    .attr("text-anchor", "middle")
-    .attr("font-size", "10")
-    .text(`L${layerIdx + 1} H${headIdx + 1}`);
-  // Draw attention lines with per-row normalization.
-  attention[layerIdx][headIdx].forEach((sourceWeights, sourceIdx) => {
-    const rowMax = Math.max(...sourceWeights) || 1;
-    sourceWeights.forEach((weight, targetIdx) => {
-      if (weight > 0.01 && sourceIdx !== targetIdx) {
-        const normalizedWeight = weight / rowMax;
-        svg.append("line")
-          .attr("x1", padding)
-          .attr("y1", padding + sourceIdx * tokenHeight - 5)
-          .attr("x2", xRight)
-          .attr("y2", padding + targetIdx * tokenHeight - 5)
-          .attr("stroke", "#800000") // Bordo red
-          .attr("stroke-width", Math.max(0.5, normalizedWeight * maxLineWidth))
-          .attr("opacity", Math.min(maxOpacity, normalizedWeight * 2))
-          .attr("stroke-linecap", "round");
-      }
-    });
-  });
-  // Click handler remains unchanged, using the passed-in data object.
-  thumbnail.on("click", function() {
-    d3.select("#display_head .number-box").text(headIdx + 1);
-    d3.select("#display_layer .number-box").text(layerIdx + 1);
-    displayHoverTokens(data, layerIdx, headIdx);
-  });
-  return thumbnail.node();
-}
-// Function to display the tokens and attention values
-// function displayOutput(data) {
-//   const outputDiv = document.getElementById('output');
-//   outputDiv.innerHTML = `
-//     <h2>Tokens</h2>
-//     <pre>${JSON.stringify(data.tokens, null, 2)}</pre>
-//     <h2>Attention</h2>
-//     <pre>${JSON.stringify(data.attention, null, 2)}</pre>
-//   `;
-// }
-function renderTokens(tokens, attentionData, layer_idx, head_idx) {
-  const container = document.getElementById('tokenContainer');
-  container.innerHTML = "";
-  tokens.forEach((token, index) => {
-    const span = document.createElement('span');
-    span.textContent = token.replace("Ġ", "") + " ";
-    span.style.fontSize = "32px";
-    span.addEventListener('mouseenter', () => {
-      highlightAttention(index, attentionData, layer_idx, head_idx);
-    });
-    span.addEventListener('mouseleave', () => {
-      resetTokenSizes();
-    });
-    container.appendChild(span);
-  });
-}
-function displayHoverTokens(data, layer_idx, head_idx) {
-  let tokens, attentionMatrix;
-  if (!data.tokens || !data.attention) {
-    tokens = ['This', 'is', 'a', 'test', '.'];
-    // Create a dummy attention matrix if missing
-    attentionMatrix = Array(12)
-      .fill(null)
-      .map(() => Array(12).fill(null).map(() => Array(tokens.length).fill(0)));
-  } else {
-    tokens = data.tokens;
-    attentionMatrix = data.attention;
-  }
-  renderTokens(tokens, attentionMatrix, layer_idx, head_idx);
-}
-function resetTokenSizes() {
-  const container = document.getElementById("tokenContainer");
-  Array.from(container.children).forEach((span) => {
-    span.style.fontSize = "32px";
-    span.style.color = "#555";
-  });
-}
-function highlightAttention(index, attentionData, layer_idx, head_idx) {
-  const container = document.getElementById('tokenContainer');
-  const row = attentionData[layer_idx][head_idx][index];
-  if (!row) {
-    console.warn(`No attention data for token index ${index}`);
-    return;
-  }
-  const weights = row;
-  if (!weights.length) {
-    return;
-  }
-  // Find the maximum weight
-  const maxWeight = Math.max(...weights) || 1;
-  const baseFontSize = 32;
-  const maxIncrease = 20;
-  const maxIndex = weights.indexOf(maxWeight);
-  Array.from(container.children).forEach((span, idx) => {
-    const weight = weights[idx];
-    if (typeof weight === 'number') {
-      const newFontSize = baseFontSize + (weight / maxWeight) * maxIncrease;
-      span.style.fontSize = newFontSize + "px";
-      if (idx === maxIndex) {
-        span.style.color = "#800000"; // Bordo red
-      } else {
-        span.style.color = "#555"; // Reset color
-      }
-    } else {
-      // For tokens without a corresponding weight, reset styles.
-      span.style.fontSize = baseFontSize + "px";
-      span.style.color = "#555";
-    }
-  });
-}

frontend/src/App.css ADDED Viewed

	@@ -0,0 +1,42 @@

+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+.card {
+  padding: 2em;
+}
+.read-the-docs {
+  color: #888;
+}

frontend/src/App.jsx ADDED Viewed

	@@ -0,0 +1,16 @@

+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Homepage from './components/Homepage';
+import UploadPage from './components/UploadPage';
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Homepage />} />
+        <Route path="/upload" element={<UploadPage />} />
+      </Routes>
+    </Router>
+  );
+}
+export default App;

frontend/src/assets/react.svg ADDED Viewed

frontend/src/components/Homepage.jsx ADDED Viewed

	@@ -0,0 +1,16 @@

+function Homepage() {
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">
+          Hello World
+        </h1>
+        <p className="text-lg text-gray-600">
+          PDF Interrogation App - Coming Soon
+        </p>
+      </div>
+    </div>
+  );
+}
+export default Homepage;

frontend/src/components/UploadPage.jsx ADDED Viewed

	@@ -0,0 +1,61 @@

+import { useState, useRef } from 'react';
+import { Document, Page, pdfjs } from 'react-pdf';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import 'react-pdf/dist/Page/TextLayer.css';
+pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.js';
+function UploadPage() {
+  const fileInputRef = useRef(null);
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [numPages, setNumPages] = useState(null);
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {!selectedFile ? (
+        // Show upload UI
+        <div className="flex items-center justify-center min-h-screen">
+          <div className="text-center">
+            <h1 className="text-3xl font-bold text-gray-900 mb-4">
+              Upload Your PDF
+            </h1>
+            <p className="text-gray-600 mb-8">
+              Click below to upload a PDF and start your deep dive.
+            </p>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".pdf"
+              className="hidden"
+              onChange={(e) => setSelectedFile(e.target.files[0])}
+            />
+            <button
+              onClick={() => fileInputRef.current.click()}
+              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+            >
+              Upload PDF
+            </button>
+          </div>
+        </div>
+      ) : (
+        // Show PDF + chat layout
+        <div className="flex min-h-screen">
+          <div className="w-2/3 bg-white p-4">
+            <Document
+              file={selectedFile}
+              onLoadSuccess={({ numPages }) => setNumPages(numPages)}
+            >
+              <Page pageNumber={1} width={600} />
+            </Document>
+            {numPages && <p className="mt-2">Page 1 of {numPages}</p>}
+          </div>
+          <div className="w-1/3 bg-gray-100">
+            Chat will go here
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+export default UploadPage;

frontend/src/index.css ADDED Viewed

	@@ -0,0 +1 @@


1	+ @import "tailwindcss";

frontend/src/main.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/styles.css DELETED Viewed

@@ -1,198 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-/* Basic Resets & Body */
-html, body {
-  margin: 0;
-  padding: 0;
-  font-family: 'Lora', 'Roboto', sans-serif;
-  background-color: #fefdf6; /* Off-white background */
-  color: #333;
-}
-input:focus,
-select:focus,
-textarea:focus,
-button:focus {
-    outline: none;
-}
-/* Header spanning full width */
-header {
-  width: 100%;
-  background-color: #fff;
-  padding: 1rem 2rem;
-  border-bottom: 1px solid #ddd;
-}
-header h1 {
-  margin: 0;
-  font-size: 1.8rem;
-  font-weight: 100;
-}
-/*
-  Container that splits the page:
-  left (main) ~75%, right (aside) ~25%
-*/
-.container {
-  display: flex;
-  flex-direction: row;
-  min-height: calc(100vh - 60px); /* Keep some height below header */
-}
-/* Main content on the left */
-.container main {
-  width: 75%;
-  padding: 2rem;
-  box-sizing: border-box;
-}
-/* The aside on the right can be used or left empty */
-.container aside {
-  width: 25%;
-  padding: 2rem;
-  box-sizing: border-box;
-  background-color: #fffff8;
-}
-/* ABOUT / DEEP GAZE SECTIONS */
-.about-section {
-  margin-bottom: 2rem;
-}
-.about-section h2 {
-  font-size: 1.4rem;
-  margin-bottom: 1rem;
-  font-weight: 100;
-  font-style: italic;
-}
-.about-section p {
-  line-height: 1.6;
-  margin-bottom: 1rem;
-}
-.deep-gaze-section h2 {
-  font-size: 1.4rem;
-  margin-bottom: 0.5rem;
-  font-weight: 100;
-  font-style: italic;
-}
-.deep-gaze-section p {
-  margin-bottom: 1rem;
-  line-height: 1.6;
-}
-/* Selection & Text Form Styles */
-.selection-form,
-.text-form {
-  margin-bottom: 1.5rem;
-}
-.selection-form label {
-  margin-right: 0.5rem;
-}
-.selection-form select {
-  margin-right: 1rem;
-}
-.text-form {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  border: none;
-}
-textarea {
-  width: 100%;
-  max-width: 100%;
-  font-size: 2rem;
-  font-weight: 700;
-  margin-bottom: 2rem;
-  border: none;
-  resize: none;
-  font-family: 'Roboto', sans-serif;
-  background-color: #fffff8;
-  color: #3a3939;
-  border-radius: 8px;
-  padding: 20px;
-  filter: drop-shadow(0 0 0.75rem #ddd);
-}
-textarea::placeholder {
-  color: #888;
-  font-family: 'Roboto', sans-serif;
-  font-size:2rem;
-  font-weight: 700;
-}
-button {
-  background-color: #4b80f9;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  padding: 0.6rem 1rem;
-  cursor: pointer;
-  font-size: 1rem;
-}
-button:hover {
-  background-color: #3f6ddb;
-}
-/* Output Area */
-#output {
-  background-color: #fff;
-  border: 1px solid #ddd;
-  padding: 1rem;
-  margin-bottom: 1rem;
-  max-height: 300px;
-  overflow-y: auto;
-}
-#output h2 {
-  margin-top: 0;
-  font-size: 1.2rem;
-}
-/* Token Container */
-#tokenContainer {
-  margin-top: 1rem;
-}
-/* Token highlighting styles */
-#tokenContainer span {
-  cursor: default;
-  transition: font-size 0.9s ease;
-  color: #555;
-  display: inline-block;
-  transition: font-size 0.9s ease;
-  margin-right: 4px;
-  padding: 2px 4px;
-}
-.text-form button {
-  background-color: #800000; /* Bordo red */
-  color: #fff; /* Optional: set text color to white for contrast */
-  border: none;
-  padding: 10px 20px;
-  font-size: 16px;
-  cursor: pointer;
-}
-#credits {
-  font-size: 0.8rem;
-  color: #888;
-  margin-top: 1rem;
-  font-style: italic;
-}

frontend/tailwind.config.js ADDED Viewed

	@@ -0,0 +1,11 @@

+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

frontend/vite.config.js ADDED Viewed

	@@ -0,0 +1,7 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})