Hugging Face's logo

Spaces:
wr92-course
/
test
Running

App Files Community
4

docs(space): add student How to Start guide

#1
by miyuki17 - opened
base: refs/heads/main
←
from: refs/pr/1
Discussion Files changed
+139
-8
Files changed (9) hide show
  1. .gitattributes +3 -0
  2. README.md +9 -7
  3. guide-assets/duplicate-menu.png +3 -0
  4. guide-assets/files-tab.png +0 -0
  5. guide-assets/space-home.png +3 -0
  6. how-to-start.html +84 -0
  7. how-to-start.pdf +3 -0
  8. index.html +6 -1
  9. style.css +28 -0
.gitattributes CHANGED
@@ -47,3 +47,6 @@ examples/000000181666.jpg filter=lfs diff=lfs merge=lfs -text
47
  examples/000000252219.jpg filter=lfs diff=lfs merge=lfs -text
48
  examples/000000376310.jpg filter=lfs diff=lfs merge=lfs -text
49
  examples/000000397133.jpg filter=lfs diff=lfs merge=lfs -text
 
 
 
 
47
  examples/000000252219.jpg filter=lfs diff=lfs merge=lfs -text
48
  examples/000000376310.jpg filter=lfs diff=lfs merge=lfs -text
49
  examples/000000397133.jpg filter=lfs diff=lfs merge=lfs -text
50
+ guide-assets/duplicate-menu.png filter=lfs diff=lfs merge=lfs -text
51
+ guide-assets/space-home.png filter=lfs diff=lfs merge=lfs -text
52
+ how-to-start.pdf filter=lfs diff=lfs merge=lfs -text
README.md CHANGED
@@ -44,20 +44,22 @@ The source code and the live demo are the same project:
44
  - `detector.js` — the AI model call
45
  - `examples/` — tested COCO validation images
46
 
47
- ## Baseline assignment (about 70%)
48
 
49
- A baseline submission should successfully use a pretrained AI model to complete a real object-detection task and present the result clearly. At minimum, students should be able to show the input image, detected objects, bounding boxes, labels, and confidence scores, and explain what the model is doing at a high level.
50
 
51
- Students are not required to invent or train an object detector from scratch for the baseline.
 
 
52
 
53
  ## Going beyond the baseline
54
 
55
- Higher-scoring work should deepen **object detection** itself. Students should independently investigate a meaningful extension, for example:
56
 
57
- - compare or replace pretrained object detectors;
58
- - tune confidence, IoU/NMS, or image size and explain the trade-offs;
59
  - test another dataset or domain and analyze failure cases;
60
- - improve robustness, speed, evaluation, or the object-detection application.
61
 
62
  The emphasis is on meaningful exploration, not simply adding more lines of code.
63
 
 
44
  - `detector.js` — the AI model call
45
  - `examples/` — tested COCO validation images
46
 
47
+ ## Student assignment
48
 
49
+ Students can duplicate this Space as a working starting point, then build their own AI mini app. They may extend object detection or adapt the project to a different AI task. A submission should make the app's purpose, input, output, and AI model or service easy to understand and demonstrate at least one working example.
50
 
51
+ In the App tab, select **How to Start** for the browser-based steps to create an account, duplicate the Space, edit files, test, and submit a public Space URL. The [PDF guide](./how-to-start.pdf) has the same content.
52
+
53
+ Students are not required to invent or train an AI model from scratch.
54
 
55
  ## Going beyond the baseline
56
 
57
+ Higher-scoring work should deepen the chosen **AI task** itself. Students should independently investigate a meaningful extension, for example:
58
 
59
+ - compare or replace pretrained models;
60
+ - tune a relevant setting and explain the trade-offs;
61
  - test another dataset or domain and analyze failure cases;
62
+ - improve robustness, speed, evaluation, or the AI application.
63
 
64
  The emphasis is on meaningful exploration, not simply adding more lines of code.
65
 
guide-assets/duplicate-menu.png ADDED

Git LFS Details

  • SHA256: 35fb386ad94f402877e57b9cced00bf4d250f42b39ccb4de2c43ff804b957568
  • Pointer size: 131 Bytes
  • Size of remote file: 235 kB
guide-assets/files-tab.png ADDED
guide-assets/space-home.png ADDED

Git LFS Details

  • SHA256: 9f68e99dffeb5a8790b85e89e6ae295cad47c80c7371990258985538e0a2a14d
  • Pointer size: 131 Bytes
  • Size of remote file: 183 kB
how-to-start.html ADDED
@@ -0,0 +1,84 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <meta name="description" content="A beginner guide to duplicating the course Hugging Face Space and publishing your own AI mini app.">
7
+ <title>How to Start · AI Mini App</title>
8
+ <style>
9
+ :root { color-scheme: light; --ink:#162033; --muted:#526176; --line:#d9e4ef; --blue:#2156a5; --light:#f4f8fc; --gold:#ffe49a; }
10
+ * { box-sizing:border-box; }
11
+ body { margin:0; color:var(--ink); background:#f7fafd; font:16px/1.58 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
12
+ a { color:var(--blue); }
13
+ a:focus-visible { outline:3px solid #faad23; outline-offset:3px; }
14
+ .shell { max-width:1080px; margin:auto; padding:24px 28px 72px; }
15
+ .topbar { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:34px; }
16
+ .brand { font-weight:760; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
17
+ .top-actions { display:flex; gap:10px; flex-wrap:wrap; }
18
+ .top-actions a { text-decoration:none; border:1px solid var(--line); background:white; border-radius:999px; padding:8px 13px; font-size:13px; font-weight:650; }
19
+ .hero { background:linear-gradient(135deg,#e7f1ff 0%,#f9fbff 65%,#fff5d5 100%); border:1px solid #cbdcf0; border-radius:26px; padding:40px 42px; }
20
+ .eyebrow { font-size:12px; font-weight:800; letter-spacing:.12em; color:#325f9b; margin:0 0 12px; }
21
+ h1 { margin:0; font-size:clamp(42px,6vw,70px); line-height:1.04; letter-spacing:-.055em; }
22
+ .subtitle { margin:16px 0 0; color:#32445d; font-size:21px; font-weight:600; }
23
+ .goal { margin:28px 0 0; padding:18px 20px; background:white; border-left:5px solid #2b67bb; border-radius:10px; font-size:17px; }
24
+ .time { margin:15px 0 0; color:var(--muted); font-size:14px; }
25
+ .route { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:26px 0 14px; }
26
+ .route span { background:#e8f0fa; border-radius:999px; padding:7px 11px; font-size:13px; font-weight:750; }
27
+ .route b { color:#67819f; }
28
+ .section-kicker { margin:34px 0 15px; font-size:12px; font-weight:800; letter-spacing:.12em; color:#4c6b94; text-transform:uppercase; }
29
+ .step { border:1px solid var(--line); background:white; border-radius:19px; padding:26px 28px; margin:16px 0; box-shadow:0 8px 24px rgba(35,65,110,.035); }
30
+ .step-top { display:flex; gap:14px; align-items:center; margin-bottom:12px; }
31
+ .step-num { display:inline-grid; place-items:center; flex:none; width:40px; height:40px; border-radius:12px; color:white; background:#245aa7; font-weight:800; }
32
+ h2 { margin:0; font-size:23px; line-height:1.2; letter-spacing:-.025em; }
33
+ .step-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr); gap:24px; }
34
+ .step-grid:has(.step-copy:only-child) { display:block; }
35
+ .step-copy p { margin:8px 0 12px; }
36
+ .screen { align-self:start; border:1px solid #bed2e9; border-radius:13px; overflow:hidden; background:#f8fbff; font-size:14px; }
37
+ .screen-label { display:block; background:#e6f0fc; padding:9px 14px; color:#315d97; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
38
+ .screen div { margin:0 12px; padding:11px 2px; border-bottom:1px solid #dbe7f2; font-weight:650; }
39
+ .screen div:last-child { border:0; }
40
+ .shot { margin:18px 0 0; }
41
+ .shot-image { position:relative; border:1px solid #d2dce8; border-radius:12px; overflow:hidden; line-height:0; }
42
+ .shot-image img { display:block; width:100%; height:auto; }
43
+ .shot-mark { position:absolute; border:3px solid #df4c31; border-radius:6px; box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 5px rgba(223,76,49,.22); }
44
+ .shot-mark b { position:absolute; top:-13px; left:-13px; display:grid; place-items:center; width:25px; height:25px; background:#df4c31; border:2px solid white; border-radius:50%; color:white; font:800 13px/1 system-ui,sans-serif; }
45
+ .shot figcaption { margin:9px 2px 0; color:var(--muted); font-size:13px; line-height:1.4; }
46
+ .filemap, .finish, .trouble { background:white; border:1px solid var(--line); border-radius:19px; padding:26px 28px; margin:16px 0; }
47
+ .filemap h2,.finish h2,.trouble h2 { margin-bottom:15px; }
48
+ table { border-collapse:collapse; width:100%; }
49
+ th,td { text-align:left; vertical-align:top; border-bottom:1px solid #e6edf5; padding:10px 6px; }
50
+ th { width:23%; }
51
+ tr:last-child th,tr:last-child td { border-bottom:0; }
52
+ code { background:#edf3fa; border-radius:5px; padding:2px 5px; color:#174781; }
53
+ .finish ul { list-style:none; padding:0; margin:0; }
54
+ .finish li { padding:8px 0 8px 32px; position:relative; }
55
+ .finish li::before { content:"✓"; display:grid; place-items:center; position:absolute; left:0; top:9px; width:21px; height:21px; color:#155e58; background:#ddf4ef; border-radius:6px; font-weight:bold; }
56
+ .help-row { display:grid; grid-template-columns:220px 1fr; gap:14px; padding:13px 0; border-top:1px solid #e6edf5; }
57
+ .help-row p { margin:0; }
58
+ .sources { font-size:13px; color:var(--muted); }
59
+ .sources ul { padding-left:20px; }
60
+ .footnote { color:#64758a; font-size:12px; }
61
+ @media(max-width:720px) { .shell { padding:18px 16px 54px; } .hero { padding:28px 24px; } .step,.filemap,.finish,.trouble { padding:21px; } .step-grid { grid-template-columns:1fr; } .help-row { grid-template-columns:1fr; gap:2px; } th { width:31%; } }
62
+ @media print { @page { size:A4; margin:15mm; } body { background:white; font-size:11pt; } .shell { max-width:none; padding:0; } .topbar { display:none; } .hero { border-radius:0; padding:20px; } .step,.filemap,.finish,.trouble { box-shadow:none; break-inside:avoid; } a { color:#174781; } }
63
+ </style>
64
+ </head>
65
+ <body>
66
+ <main class="shell">
67
+ <nav class="topbar" aria-label="Guide navigation"><a class="brand" href="./index.html">← Back to App</a><div class="top-actions"><a href="./index.html">Open app</a><a href="./how-to-start.pdf" download>Download PDF</a></div></nav>
68
+ <header class="hero"><p class="eyebrow">STUDENT GUIDE · HUGGING FACE SPACES</p><h1>How to Start</h1><p class="subtitle">Turn the course demo into your own AI mini app</p><p class="goal">Your finish line: a public Space under your own account that shows what your AI app does. Submit its Space link so your instructor can open and try your work quickly.</p><p class="time">You can follow the basic route entirely in your browser. No Git commands are needed.</p></header>
69
+ <div class="route" aria-label="The route"><span>Sign up</span><b>→</b><span>Duplicate</span><b>→</b><span>Change the app</span><b>→</b><span>Test</span><b>→</b><span>Submit your URL</span></div>
70
+ <p class="section-kicker">The seven steps</p>
71
+ <section class="step" id="step-01"><div class="step-top"><span class="step-num">01</span><h2>Create your Hugging Face account</h2></div><div class="step-grid"><div class="step-copy"><p>Open <a href="https://huggingface.co/join" target="_blank" rel="noopener noreferrer">https://huggingface.co/join</a>. Enter an email address you check often. Your Gmail address, or the email you use for GitHub, is fine.</p><p>Create a password, click Next, and complete the account steps shown. Sign in when you are done.</p></div><aside class="screen"><span class="screen-label">On the sign-up page</span><div>Join Hugging Face</div><div>Email Address → Password → Next</div></aside></div></section>
72
+ <section class="step" id="step-02"><div class="step-top"><span class="step-num">02</span><h2>Explore the starter demo</h2></div><div class="step-grid"><div class="step-copy"><p>Open <a href="https://huggingface.co/spaces/wr92-course/test" target="_blank" rel="noopener noreferrer">https://huggingface.co/spaces/wr92-course/test</a>. In App, choose an example image and try Run AI Detection. The first run may take longer while the model downloads.</p><p>Open Files to see the files you will receive in your own copy. You are looking at a working example, not a blank project.</p></div><aside class="screen"><span class="screen-label">On the starter Space</span><div>App | Files | Community | More (three dots)</div><div>Choose an image → Run AI Detection</div></aside></div><figure class="shot"><div class="shot-image"><img src="./guide-assets/space-home.png" alt="Actual Hugging Face webpage for step 02" loading="lazy"><span class="shot-mark" style="left:1.3889%;top:17.8571%;width:46.2963%;height:19.2857%" aria-label="The working app"><b>1</b></span></div><figcaption>The course starter Space: open the App and try one example.</figcaption></figure></section>
73
+ <section class="step" id="step-03"><div class="step-top"><span class="step-num">03</span><h2>Duplicate it into your account</h2></div><div class="step-grid"><div class="step-copy"><p>On the starter Space, open the three-dot menu at the top right and choose Duplicate this Space.</p><p>Set Owner to your own account and give the Space a clear name. Set Visibility to Public so your instructor can open it. The duplicate form starts with Private selected.</p><p>Click Duplicate Space. The complete starter project is copied for you; you do not need to paste each code file by hand.</p></div><aside class="screen"><span class="screen-label">The two clicks to find</span><div>Top-right menu (three dots) → Duplicate this Space</div><div>Owner: your account | Space name: your-project</div><div>Visibility: Public → Duplicate Space</div></aside></div><figure class="shot"><div class="shot-image"><img src="./guide-assets/duplicate-menu.png" alt="Actual Hugging Face webpage for step 03" loading="lazy"><span class="shot-mark" style="left:44.1667%;top:1.1429%;width:2.7778%;height:4.5714%" aria-label="More menu"><b>1</b></span><span class="shot-mark" style="left:44.5370%;top:43.7143%;width:16.6667%;height:4.7143%" aria-label="Duplicate this Space"><b>2</b></span></div><figcaption>On the source Space, open More (1), then choose Duplicate this Space (2).</figcaption></figure></section>
74
+ <section class="step" id="step-04"><div class="step-top"><span class="step-num">04</span><h2>Make a first edit in your copy</h2></div><div class="step-grid"><div class="step-copy"><p>Open your new Space. Select Files, open index.html, and use Edit to change the visible title and short introduction to describe your idea.</p><p>Save with a short commit message using Commit changes to main. Then return to App and check that your new text appears.</p><p>To add a new file or upload a replacement, use Files → Add file. Save the change with a commit.</p></div><aside class="screen"><span class="screen-label">Browser editing route</span><div>Your Space → Files → index.html → Edit</div><div>Change text → Commit changes to main → App</div></aside></div><figure class="shot"><div class="shot-image"><img src="./guide-assets/files-tab.png" alt="Actual Hugging Face webpage for step 04" loading="lazy"><span class="shot-mark" style="left:11.0185%;top:16.0000%;width:7.5926%;height:7.0000%" aria-label="Files tab"><b>1</b></span><span class="shot-mark" style="left:4.3519%;top:69.2857%;width:10.6481%;height:6.0000%" aria-label="index.html"><b>2</b></span></div><figcaption>The Files tab (1) lists the starter code. Open index.html (2) in your own copy to edit its page text.</figcaption></figure></section>
75
+ <section class="step" id="step-05"><div class="step-top"><span class="step-num">05</span><h2>Build your AI mini app</h2></div><div class="step-grid"><div class="step-copy"><p>You may keep improving object detection or change the template into another AI application. Give visitors a clear title, a short explanation, an obvious input, and a result they can understand.</p><p>Edit the relevant files below. Keep the README.md configuration lines sdk: static and app_file: index.html while using this browser-based route.</p><p>This Static Space runs HTML, CSS, and browser JavaScript. Uploading a Python file alone will not run a Python server. A server-based app needs a different Space type and may require a paid plan; check with your instructor before taking that route.</p><p>Never place an API key or access token in public HTML or JavaScript files.</p></div></div></section>
76
+ <section class="step" id="step-06"><div class="step-top"><span class="step-num">06</span><h2>Help your instructor understand it fast</h2></div><div class="step-grid"><div class="step-copy"><p>Make the App page answer these questions in the first few seconds: What does it do? What should I try? What result should I expect?</p><p>Update README.md with a brief project summary: purpose, input and output, AI model or service, what you changed from the starter, and one test or limitation.</p></div><aside class="screen"><span class="screen-label">Copy this mini summary into README.md</span><div>My app: [one-sentence purpose]</div><div>Input → output: [what a visitor provides and receives]</div><div>AI model/service: [name and link]</div><div>I changed: [your main additions]</div><div>Test / limitation: [one honest observation]</div></aside></div></section>
77
+ <section class="step" id="step-07"><div class="step-top"><span class="step-num">07</span><h2>Test and submit</h2></div><div class="step-grid"><div class="step-copy"><p>Return to App and wait for the Space to finish updating. Try at least one real input from beginning to end and check the output. If a model loads for the first time, allow extra time.</p><p>Open your Space link in a private browser window to check that other people can view it. If it shows 404, check Settings → Visibility and make it Public.</p><p>Submit the Space page URL, not the embedded .hf.space address, plus two sentences saying what your app does and what you changed.</p></div><aside class="screen"><span class="screen-label">Submit this URL shape</span><div>https://huggingface.co/spaces/your-username/your-project-name</div></aside></div></section>
78
+ <section class="filemap"><h2>Which file should I edit?</h2><table><tbody><tr><th scope='row'><code>index.html</code></th><td>Page structure, visible title, instructions and input/output areas</td></tr><tr><th scope='row'><code>style.css</code></th><td>Colours, spacing and layout</td></tr><tr><th scope='row'><code>app.js</code></th><td>Buttons, inputs and result display</td></tr><tr><th scope='row'><code>detector.js</code></th><td>The starter&#x27;s object-detection model call; adapt or replace for a new task</td></tr><tr><th scope='row'><code>README.md</code></th><td>Space title/configuration and the summary your instructor can scan</td></tr></tbody></table></section>
79
+ <section class="finish"><h2>Before you submit</h2><ul><li>My Space is Public and opens from a private browser window.</li><li>The App page explains my project and a visitor can try it.</li><li>At least one input produces a useful result.</li><li>README.md says what I changed and names the AI model or service.</li><li>I submitted the Hugging Face Space page URL and a two-sentence summary.</li></ul></section>
80
+ <section class="trouble"><h2>If you get stuck</h2><div class='help-row'><strong>My teacher sees 404</strong><p>Check Settings → Visibility. A Private Space is only visible to its owner.</p></div><div class='help-row'><strong>My old page still appears</strong><p>Check that the edit was committed, then refresh App after the Space updates.</p></div><div class='help-row'><strong>The AI result does not appear</strong><p>Try a known example, allow first-time model download, and check that your model can run in the browser.</p></div><div class='help-row'><strong>I need Python on a server</strong><p>Ask your instructor about a Gradio or Docker Space and check current account requirements before changing SDK.</p></div></section>
81
+ <footer class="sources"><strong>Official Hugging Face references</strong><ul><li><a href="https://huggingface.co/docs/hub/spaces-overview" target="_blank" rel="noopener noreferrer">Spaces overview and duplication</a></li><li><a href="https://huggingface.co/docs/hub/spaces-sdks-static" target="_blank" rel="noopener noreferrer">Static HTML Spaces</a></li><li><a href="https://huggingface.co/docs/hub/repositories-getting-started" target="_blank" rel="noopener noreferrer">Editing files in the browser</a></li></ul><p class="footnote">Hugging Face labels and account rules can change. If a button looks different, use the linked official help pages.</p></footer>
82
+ </main>
83
+ </body>
84
+ </html>
how-to-start.pdf ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:f8d279d82ce9c784774571280361a815891bc52b3264a2b6efeafbfa9868d6ba
3
+ size 567837
index.html CHANGED
@@ -20,6 +20,11 @@
20
  <body>
21
  <main class="page-shell">
22
 
 
 
 
 
 
23
  <!-- =========================================================
24
  HERO
25
  ========================================================== -->
@@ -463,4 +468,4 @@
463
  ></script>
464
 
465
  </body>
466
- </html>
 
20
  <body>
21
  <main class="page-shell">
22
 
23
+ <nav class="guide-linkbar" aria-label="Course guide">
24
+ <span>Building your own AI mini app?</span>
25
+ <a href="./how-to-start.html">How to Start <span aria-hidden="true">→</span></a>
26
+ </nav>
27
+
28
  <!-- =========================================================
29
  HERO
30
  ========================================================== -->
 
468
  ></script>
469
 
470
  </body>
471
+ </html>
style.css CHANGED
@@ -475,3 +475,31 @@ footer {
475
  outline: 2px solid #111827;
476
  outline-offset: 2px;
477
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
475
  outline: 2px solid #111827;
476
  outline-offset: 2px;
477
  }
478
+
479
+ /* Student guide entry point */
480
+ .guide-linkbar {
481
+ display: flex;
482
+ align-items: center;
483
+ justify-content: space-between;
484
+ flex-wrap: wrap;
485
+ gap: 10px;
486
+ margin: 0 0 28px;
487
+ padding: 11px 15px;
488
+ border: 1px solid #d6e3f4;
489
+ border-radius: 14px;
490
+ background: #edf5ff;
491
+ color: #334965;
492
+ font-size: .9rem;
493
+ font-weight: 650;
494
+ }
495
+ .guide-linkbar a {
496
+ display: inline-flex;
497
+ align-items: center;
498
+ gap: 5px;
499
+ border-radius: 8px;
500
+ color: #174f9e;
501
+ font-weight: 800;
502
+ text-decoration: none;
503
+ }
504
+ .guide-linkbar a:hover { text-decoration: underline; }
505
+ .guide-linkbar a:focus-visible { outline: 3px solid #f7b844; outline-offset: 3px; }