Spaces:

tomwatto09
/

UniSolve-Frontend

Running

App Files Files Community

tomwatto09 commited on Jun 16, 2025

Commit

12fedd3

verified ·

1 Parent(s): 9ef250c

Create index.html

Browse files

Files changed (1) hide show

index.html +195 -0

index.html ADDED Viewed

	@@ -0,0 +1,195 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>UniSolve - Academic Assistant</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: 'Times New Roman', serif;
+      background-color: #f4f9ff;
+      color: #002b5c;
+    }
+    header {
+      display: flex;
+      align-items: center;
+      padding: 1rem 2rem;
+      background-color: #e0efff;
+      border-bottom: 2px solid #c0d7ef;
+    }
+    header img {
+      height: 60px;
+      margin-right: 1rem;
+    }
+    header h1 {
+      font-size: 2.2rem;
+      margin: 0;
+      color: #004080;
+    }
+    main {
+      padding: 2rem;
+      max-width: 900px;
+      margin: auto;
+    }
+    label {
+      font-weight: bold;
+      font-size: 1.2rem;
+      display: block;
+      margin-top: 1.2rem;
+      color: #003366;
+    }
+    textarea, select {
+      width: 100%;
+      padding: 1rem;
+      margin-top: 0.3rem;
+      border: 1px solid #aacdee;
+      border-radius: 10px;
+      font-size: 1rem;
+      font-family: 'Times New Roman', serif;
+      background-color: #ffffff;
+      box-shadow: 0 1px 3px rgba(0, 92, 192, 0.12);
+    }
+    button {
+      background-color: #005cbf;
+      color: white;
+      padding: 0.9rem 1.5rem;
+      font-size: 1rem;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      margin-right: 1rem;
+      margin-top: 1rem;
+      transition: background-color 0.3s ease;
+    }
+    button:hover {
+      background-color: #004999;
+    }
+    #output {
+      white-space: pre-wrap;
+      margin-top: 2rem;
+      background: #ffffff;
+      border-radius: 10px;
+      padding: 1rem;
+      border: 1px solid #aacdee;
+      box-shadow: 0 1px 3px rgba(0, 92, 192, 0.08);
+    }
+    #loader {
+      display: none;
+      margin-top: 1.5rem;
+      font-style: italic;
+      color: #0072c6;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <img src="UniSolve-Emblem.PNG" alt="UniSolve Logo" />
+    <h1>UniSolve</h1>
+  </header>
+  <main>
+    <label for="category">Subject Category</label>
+    <select id="category">
+      <option>Arts, Humanities & Social Sciences</option>
+      <option>Law & Legal Studies</option>
+      <option>Business & Management</option>
+      <option>Psychology & Health</option>
+      <option>Media, Communication & Creative Arts</option>
+      <option>Education & Teaching</option>
+      <option>Indigenous & Global Studies</option>
+      <option>Social Work & Human Services</option>
+      <option>Criminology, Justice & Law Enforcement</option>
+      <option>Science & Technology</option>
+    </select>
+    <label for="citationStyle">Citation Style</label>
+    <select id="citationStyle">
+      <option>Harvard</option>
+      <option>APA 7th</option>
+      <option>AGLC</option>
+      <option>Chicago A (footnote)</option>
+      <option>Chicago B (author-date)</option>
+      <option>IEEE</option>
+      <option>MLA</option>
+      <option>AMA (Vancouver)</option>
+    </select>
+    <label for="caseStudy">Case Study</label>
+    <textarea id="caseStudy" rows="6" placeholder="Paste your case study here..."></textarea>
+    <label for="questions">Questions</label>
+    <textarea id="questions" rows="6" placeholder="Paste your assignment questions here..."></textarea>
+    <button onclick="generateResponse()">🧠 Generate Response</button>
+    <button onclick="exportToPDF()">⬇️ Export PDF</button>
+    <button onclick="exportToWord()">⬇️ Export Word</button>
+    <p id="loader">✍️ Generating your structured response. Please wait...</p>
+    <div id="output"></div>
+  </main>
+  <script>
+    const backend = "https://tomwatto09-unisolve-backend.hf.space";
+    async function generateResponse() {
+      const category = document.getElementById("category").value;
+      const citationStyle = document.getElementById("citationStyle").value;
+      const caseStudy = document.getElementById("caseStudy").value;
+      const questions = document.getElementById("questions").value;
+      document.getElementById("loader").style.display = "block";
+      document.getElementById("output").innerText = "";
+      const response = await fetch(`${backend}/generate`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          category,
+          citationStyle,
+          caseStudy,
+          questions
+        }),
+      });
+      const data = await response.json();
+      document.getElementById("loader").style.display = "none";
+      if (data.response) {
+        document.getElementById("output").innerText = data.response;
+      } else {
+        document.getElementById("output").innerText = `❌ Error: ${data.error}`;
+      }
+    }
+    async function exportToPDF() {
+      const content = document.getElementById("output").innerText;
+      const response = await fetch(`${backend}/export/pdf`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content }),
+      });
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "UniSolve-Response.pdf";
+      a.click();
+    }
+    async function exportToWord() {
+      const content = document.getElementById("output").innerText;
+      const response = await fetch(`${backend}/export/word`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content }),
+      });
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "UniSolve-Response.docx";
+      a.click();
+    }
+  </script>
+</body>
+</html>