| <!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 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> |
| <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 = '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'; |
| |
| 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> |
|
|
