index.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">
  <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="tngtech/deepseek-r1t2-chimera:free">DeepSeek Chat v3</option>
      <option value="grimjim/gemma-3-12b-it-norm-preserved-biprojected-abliterated">Gemma 3 abliterated</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>
</body>
  
  <script src="app.js"></script>
  
</html>