Spaces:

studycode129
/

Free_Web_LLM_Tester

Running

App Files Files Community

studycode129 commited on Oct 8, 2025

Commit

b88c4fd

verified ·

1 Parent(s): 3c65d2b

Update index.html

Browse files

Files changed (1) hide show

index.html +8 -160

index.html CHANGED Viewed

@@ -5,118 +5,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>LLM Prompt Tester For Research</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
-  <style>
-    * {
-      box-sizing: border-box;
-    }
-    body {
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(to right, #ede9fe, #f3e8ff);
-      color: #374151;
-      margin: 0;
-      padding: 20px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-    }
-    .container {
-      background: #faf5ff;
-      padding: 32px;
-      border-radius: 24px;
-      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-      width: 100%;
-      max-width: 800px;
-      border: 2px solid #c4b5fd;
-    }
-    h1 {
-      text-align: center;
-      margin-bottom: 24px;
-      font-size: 28px;
-      font-weight: 600;
-      color: #6b21a8;
-    }
-    label {
-      display: block;
-      margin: 14px 0 6px;
-      font-weight: 600;
-      color: #6b21a8;
-    }
-    textarea, select, input[type="text"] {
-      width: 100%;
-      padding: 12px;
-      margin-bottom: 16px;
-      border-radius: 10px;
-      border: 1px solid #ddd6fe;
-      font-size: 16px;
-      font-family: inherit;
-    }
-    textarea {
-      min-height: 120px;
-      resize: vertical;
-    }
-    input[type="file"] {
-      display: none;
-    }
-    .custom-file-upload {
-      display: inline-block;
-      padding: 12px 24px;
-      background-color: #8b5cf6;
-      color: white;
-      font-weight: 600;
-      border-radius: 10px;
-      cursor: pointer;
-      margin-bottom: 8px;
-    }
-    button {
-      background-color: #8b5cf6;
-      color: white;
-      font-weight: 600;
-      border: none;
-      padding: 14px;
-      border-radius: 10px;
-      font-size: 16px;
-      cursor: pointer;
-      width: 100%;
-      margin-top: 12px;
-    }
-    button:hover {
-      background-color: #7c3aed;
-    }
-    .loading {
-      font-size: 16px;
-      font-weight: bold;
-      color: #6b21a8;
-      animation: pulse 1s infinite;
-      margin: 10px 0;
-    }
-    @keyframes pulse {
-      0% { opacity: 0.3; }
-      50% { opacity: 1; }
-      100% { opacity: 0.3; }
-    }
-    pre {
-      background: #f5f3ff;
-      border: 1px solid #e9d5ff;
-      padding: 16px;
-      border-radius: 10px;
-      white-space: pre-wrap;
-      margin-top: 10px;
-    }
-    .download {
-      text-align: center;
-      margin-top: 20px;
-    }
-  </style>
 </head>
 <body>
   <div class="container">
     <h1>LLM Prompt Tester For Research</h1>
     <label for="model">Choose Model:</label>
     <select id="model">
-      <option value="google/gemma-3n-e2b-it:free">Google Gemma</option>
-      <option value="deepseek/deepseek-r1:free">DeepSeek</option>
     </select>
     <label for="prompt">Enter a Prompt:</label>
@@ -131,7 +30,7 @@
     <button onclick="send()">Send Prompt</button>
-    <div id="loading" class="loading" style="display:none;">⏳ Processing prompts... Please wait.</div>
     <h3>Response:</h3>
     <pre id="response"></pre>
@@ -140,59 +39,8 @@
       <button onclick="downloadCSV()">Download Results as CSV</button>
     </div>
   </div>
-  <script>
-    const results = [];
-   // const key = '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'; // replace this with your actual key
-    document.getElementById('fileUpload').addEventListener('change', async function () {
-  const file = this.files[0];
-  if (!file) return;
-  // Show file name preview
-  document.getElementById("fileName").textContent = `📂 Selected: ${file.name}`;
-  const text = await file.text();
-  const prompts = text.split(/\r?\n/).filter(Boolean);
-  document.getElementById("loading").style.display = "block"; // show loading
-  for (const prompt of prompts) {
-    await send(prompt);
-  }
-  document.getElementById("loading").style.display = "none"; // hide loading
-});
-    async function send(overridePrompt) {
-  const model = document.getElementById("model").value;
-  const prompt = overridePrompt || document.getElementById("prompt").value;
-  const res = await fetch("/api/send", {   // 👈 no localhost needed, Hugging Face serves it
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ model, prompt })
-  });
-  const data = await res.json();
-  const output = data.choices?.[0]?.message?.content || JSON.stringify(data);
-  document.getElementById("response").textContent = output;
-  results.push({ model, prompt, output });
-}
-    function downloadCSV() {
-      let csv = "Model,Prompt,Output\n";
-      results.forEach(row => {
-        csv += `"${row.model}","${row.prompt.replace(/\n/g, " ")}","${row.output.replace(/\n/g, " ")}"\n`;
-      });
-      const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
-      const link = document.createElement("a");
-      link.href = URL.createObjectURL(blob);
-      link.download = "llm_test_results.csv";
-      link.click();
-    }
-  </script>
 </body>
 </html>

   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>LLM Prompt Tester For Research</title>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
+ <body>
   <div class="container">
     <h1>LLM Prompt Tester For Research</h1>
     <label for="model">Choose Model:</label>
     <select id="model">
+      <option value="google/gemma-3-27b-it:free">Google Gemma</option>
+      <option value="deepseek/deepseek-chat-v3.1:free">DeepSeek Chat v3</option>
     </select>
     <label for="prompt">Enter a Prompt:</label>
     <button onclick="send()">Send Prompt</button>
+    <div id="loading" class="loading" style="display:none;"> Processing prompts... Please wait.</div>
     <h3>Response:</h3>
     <pre id="response"></pre>
       <button onclick="downloadCSV()">Download Results as CSV</button>
     </div>
   </div>
 </body>
+  <script src="app.js"></script>
 </html>