Spaces:

studycode129
/

Free_Web_LLM_Tester

Running

App Files Files Community

studycode129 commited on Jul 20, 2025

Commit

abadc05

verified ·

1 Parent(s): 2c8a169

Update index.html

Browse files

Files changed (1) hide show

index.html +205 -42

index.html CHANGED Viewed

@@ -1,44 +1,207 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<title>LLM TESTING</title>
-        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-      <div class="container">
-			<h1>Welcome to your researcher friendly LLM workspace!</h1>
-              <label for="model">Choose Model:</label>
-              <select id="model">
-                <option value="google/gemma-3n-e2b-it:free">Google Gemma</option>
-                <option value="deepseek-chat">DeepSeek Chat v3</option>
-              </select>
-              <label for="prompt">Your Prompt:</label>
-              <textarea id="prompt" placeholder="Type your test prompt here..."></textarea>
-              <label for="fileUpload">Or upload a csv file with prompts</label>
-              <input type="file" id="fileUpload" accept=".txt,.csv">
-                 <!-- File name preview -->
-             <label for = "fileUpload" class="custom-file-upload"> Choose File </label>
-              <p id="fileName" class="file-name"></p>
-              <button onclick="send()">Send Prompt</button>
-            <h3 style="margin-top: 24px; color: #6b21a8;">Response:</h3>
-                <!-- Loading animation -->
-            <div id="loading" class="loading" style="display: none;">⏳ Processing prompts... Please wait.</div>
-        <pre id="responseOutput"></pre>
-      <div class="download">
-            <button onclick="downloadCSV()">Download Results as CSV</button>
-      </div>
     </div>
-    <script src="app.js"></script>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <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</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 Chat v3</option>
+    </select>
+    <label for="prompt">Enter a Prompt:</label>
+    <textarea id="prompt" placeholder="Type a prompt here..."></textarea>
+    <label for="fileUpload">Or upload prompts from a file (.txt/.csv):</label>
+    <label class="custom-file-upload">
+      <input type="file" id="fileUpload" accept=".txt,.csv"/>
+      Choose File
+    </label>
+    <p id="fileName" class="file-name">No file selected</p>
+    <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>
+    <div class="download">
+      <button onclick="downloadCSV()">Download Results as CSV</button>
     </div>
+  </div>
+  <script>
+    const results = [];
+    const key = 'YOUR_OPENROUTER_API_KEY'; // replace this with your actual key
+    document.getElementById('fileUpload').addEventListener('change', async function () {
+      const file = this.files[0];
+      const fileNameDisplay = document.getElementById('fileName');
+      fileNameDisplay.textContent = file ? file.name : 'No file selected';
+      if (!file) return;
+      const text = await file.text();
+      const prompts = text.split(/\r?\n/).filter(Boolean);
+      document.getElementById('loading').style.display = 'block';
+      for (const prompt of prompts) {
+        await send(prompt);
+      }
+      document.getElementById('loading').style.display = 'none';
+    });
+    async function send(overridePrompt) {
+      const model = document.getElementById("model").value;
+      const prompt = overridePrompt || document.getElementById("prompt").value;
+      if (!prompt) return;
+      document.getElementById('loading').style.display = 'block';
+      const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+        method: "POST",
+        headers: {
+          "Authorization": "Bearer " + key,
+          "Content-Type": "application/json",
+          "HTTP-Referer": "https://huggingface.co/spaces/studycode129/Free_Web_LLM_Tester"
+        },
+        body: JSON.stringify({
+          model,
+          messages: [{ role: "user", content: prompt }],
+          temperature: 0.7
+        })
+      });
+      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 });
+      document.getElementById('loading').style.display = 'none';
+    }
+    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>