Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>SafeSpace API Test</title> | |
| <style> | |
| :root { | |
| --bg: #0f1a16; | |
| --panel: #16231f; | |
| --accent: #4fd1a5; | |
| --accent-2: #7ce3c3; | |
| --text: #e8f6f1; | |
| --muted: #9bb7ad; | |
| --danger: #f87171; | |
| --border: #274136; | |
| } | |
| * { box-sizing: border-box; } | |
| body { | |
| margin: 0; | |
| font-family: "Space Grotesk", "Figtree", "Montserrat", sans-serif; | |
| background: radial-gradient(circle at 15% 10%, #193229, #0f1a16 55%); | |
| color: var(--text); | |
| } | |
| header { | |
| padding: 32px 24px 16px; | |
| text-align: center; | |
| } | |
| header h1 { | |
| margin: 0 0 8px; | |
| font-size: 30px; | |
| letter-spacing: 0.4px; | |
| } | |
| header p { | |
| margin: 0; | |
| color: var(--muted); | |
| } | |
| main { | |
| max-width: 980px; | |
| margin: 0 auto; | |
| padding: 24px; | |
| display: grid; | |
| gap: 18px; | |
| } | |
| .panel { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 18px; | |
| padding: 20px; | |
| box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25); | |
| } | |
| label { | |
| display: block; | |
| font-size: 13px; | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| color: var(--muted); | |
| margin-bottom: 8px; | |
| } | |
| input, textarea { | |
| width: 100%; | |
| padding: 12px 14px; | |
| border-radius: 12px; | |
| border: 1px solid var(--border); | |
| background: #0c1512; | |
| color: var(--text); | |
| font-size: 15px; | |
| } | |
| textarea { min-height: 120px; resize: vertical; } | |
| .row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } | |
| button { | |
| border: none; | |
| background: linear-gradient(120deg, var(--accent), var(--accent-2)); | |
| color: #062318; | |
| font-weight: 700; | |
| font-size: 15px; | |
| padding: 12px 18px; | |
| border-radius: 12px; | |
| cursor: pointer; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| width: 100%; | |
| } | |
| button:hover { transform: translateY(-1px); box-shadow: 0 10px 18px rgba(79, 209, 165, 0.2); } | |
| pre { | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| background: #0b1512; | |
| border: 1px solid #1f352d; | |
| border-radius: 12px; | |
| padding: 16px; | |
| min-height: 120px; | |
| } | |
| .error { color: var(--danger); font-weight: 600; } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>SafeSpace API Test</h1> | |
| <p>Quickly validate AI endpoints on your Hugging Face Space.</p> | |
| </header> | |
| <main> | |
| <section class="panel"> | |
| <div class="row"> | |
| <div> | |
| <label for="baseUrl">Base URL</label> | |
| <input id="baseUrl" value="https://AliSakr9997-safespace.hf.space" /> | |
| </div> | |
| <div> | |
| <label for="userId">User ID</label> | |
| <input id="userId" value="1" /> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="panel"> | |
| <label for="textInput">User Text</label> | |
| <textarea id="textInput">I have been feeling overwhelmed at work and can't sleep.</textarea> | |
| </section> | |
| <section class="panel"> | |
| <label for="survey">Survey Answers (42 values, 0-4, comma-separated)</label> | |
| <textarea id="survey">0,1,2,1,0,2,1,0,1,2,1,0,2,1,0,2,1,1,0,2,1,2,1,0,2,1,0,1,2,1,0,2,1,0,1,2,1,0,2,1,0,1</textarea> | |
| </section> | |
| <section class="panel"> | |
| <div class="row"> | |
| <button id="analyzeBtn">POST /v1/analysis</button> | |
| <button id="historyBtn">GET /v1/users/{id}/analyses</button> | |
| </div> | |
| </section> | |
| <section class="panel"> | |
| <label>Response</label> | |
| <pre id="output">Waiting for request...</pre> | |
| </section> | |
| </main> | |
| <script> | |
| const output = document.getElementById('output'); | |
| const baseUrl = document.getElementById('baseUrl'); | |
| const userId = document.getElementById('userId'); | |
| const textInput = document.getElementById('textInput'); | |
| const survey = document.getElementById('survey'); | |
| function setOutput(data, isError = false) { | |
| if (isError) { | |
| output.innerHTML = '<span class="error">' + data + '</span>'; | |
| } else { | |
| output.textContent = typeof data === 'string' ? data : JSON.stringify(data, null, 2); | |
| } | |
| } | |
| function parseSurvey() { | |
| return survey.value | |
| .split(',') | |
| .map((v) => parseInt(v.trim(), 10)) | |
| .filter((v) => Number.isFinite(v)); | |
| } | |
| document.getElementById('analyzeBtn').addEventListener('click', async () => { | |
| setOutput('Sending request...'); | |
| try { | |
| const payload = { | |
| user_id: userId.value, | |
| text: textInput.value, | |
| survey_answers: parseSurvey(), | |
| locale: 'en', | |
| client_ts: new Date().toISOString(), | |
| }; | |
| const res = await fetch(`${baseUrl.value}/v1/analysis`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify(payload), | |
| }); | |
| const json = await res.json(); | |
| setOutput(json); | |
| } catch (err) { | |
| setOutput(err.message || String(err), true); | |
| } | |
| }); | |
| document.getElementById('historyBtn').addEventListener('click', async () => { | |
| setOutput('Fetching history...'); | |
| try { | |
| const res = await fetch(`${baseUrl.value}/v1/users/${userId.value}/analyses?limit=20&offset=0`); | |
| const json = await res.json(); | |
| setOutput(json); | |
| } catch (err) { | |
| setOutput(err.message || String(err), true); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |