Spaces:
Running
Running
| <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> | |