Spaces:
Sleeping
Sleeping
File size: 3,587 Bytes
c86c45b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | import React from 'react';
function Help() {
return (
<main id="page-f" className="page">
<h1 className="page-title">Help</h1>
<a
className="fake-ad"
href="https://www.kcl.ac.uk/"
target="_blank"
rel="noreferrer"
aria-label="Sponsored: King's College London"
>
<div className="fake-ad-badge">Sponsored</div>
<img src="/assets/111.jpg" alt="King's College London campus sign" />
<div className="fake-ad-cta">Learn More</div>
</a>
<div className="help-container">
<section className="help-section">
<h2>How to Use Focus Guard</h2>
<ol>
<li>Click "Start" or navigate to "Start Focus" in the menu</li>
<li>Allow camera access when prompted</li>
<li>Click the green "Start" button to begin monitoring</li>
<li>Position yourself in front of the camera</li>
<li>The system will track your focus in real-time</li>
<li>Click "Stop" when you're done to save the session</li>
</ol>
</section>
<section className="help-section">
<h2>What is "Focused"?</h2>
<p>The system considers you focused when:</p>
<ul>
<li>You are clearly visible in the camera frame</li>
<li>You are centered in the view</li>
<li>Your face is directed toward the screen</li>
<li>No other people are detected in the frame</li>
</ul>
</section>
<section className="help-section">
<h2>Adjusting Settings</h2>
<p><strong>Frame Rate:</strong> Lower values reduce CPU usage but update less frequently. Recommended: 15-30 FPS.</p>
<p><strong>Sensitivity:</strong> Higher values require stricter focus criteria. Adjust based on your setup.</p>
</section>
<section className="help-section">
<h2>Privacy & Data</h2>
<p>All video processing happens in real-time. No video frames are stored - only detection metadata (focus status, timestamps) is saved in your local database.</p>
</section>
<section className="help-section">
<h2>FAQ</h2>
<details>
<summary>Why is my focus score low?</summary>
<p>Ensure good lighting, center yourself in the camera frame, and adjust sensitivity settings in the Customise page.</p>
</details>
<details>
<summary>Can I use this without a camera?</summary>
<p>No, camera access is required for focus detection.</p>
</details>
<details>
<summary>Does this work on mobile?</summary>
<p>The app works on mobile browsers but performance may vary due to processing requirements.</p>
</details>
<details>
<summary>Is my data private?</summary>
<p>Yes! All processing happens locally. Video frames are analyzed in real-time and never stored. Only metadata is saved.</p>
</details>
</section>
<section className="help-section">
<h2>Technical Info</h2>
<p><strong>Model:</strong> YOLOv8n (Nano)</p>
<p><strong>Detection:</strong> Real-time person detection with pose analysis</p>
<p><strong>Storage:</strong> SQLite local database</p>
<p><strong>Framework:</strong> FastAPI + Native JavaScript</p>
</section>
</div>
</main>
);
}
export default Help;
|