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