| | <!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> |
| |
|
