Spaces:

workcha
/

calcal

Sleeping

App Files Files Community

workcha commited on 12 days ago

Commit

61b4ff5

verified ·

1 Parent(s): fe8a5d3

Upload 19 files

Browse files

Files changed (20) hide show

.gitattributes +8 -0
6주차_HuggingFace_칼로리카운터.html +1107 -0
README.md +79 -6
__pycache__/model_config.cpython-313.pyc +0 -0
app.py +215 -0
calcal/.gitattributes +35 -0
calcal/README.md +14 -0
images/01_main.png +3 -0
images/02_models.png +3 -0
images/03_model_card.png +3 -0
images/04_spaces.png +3 -0
images/05_tokens.png +3 -0
images/06_new_space.png +3 -0
images/07_secrets.png +0 -0
images/08_files.png +0 -0
images/09_app_logs.png +3 -0
images/10_write_token.png +3 -0
images/11_running.png +0 -0
model_config.py +35 -0
requirements.txt +7 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,11 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+images/01_main.png filter=lfs diff=lfs merge=lfs -text
+images/02_models.png filter=lfs diff=lfs merge=lfs -text
+images/03_model_card.png filter=lfs diff=lfs merge=lfs -text
+images/04_spaces.png filter=lfs diff=lfs merge=lfs -text
+images/05_tokens.png filter=lfs diff=lfs merge=lfs -text
+images/06_new_space.png filter=lfs diff=lfs merge=lfs -text
+images/09_app_logs.png filter=lfs diff=lfs merge=lfs -text
+images/10_write_token.png filter=lfs diff=lfs merge=lfs -text

6주차_HuggingFace_칼로리카운터.html ADDED Viewed

	@@ -0,0 +1,1107 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>6주차 — HuggingFace × Spaces × 칼로리 카운터</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
+      font-size: 16px; line-height: 1.7; color: #1a1a2e;
+      background: #f8f9fc; overflow-x: hidden;
+    }
+    a { color: #f59e0b; text-decoration: none; font-weight: 600; }
+    a:hover { text-decoration: underline; }
+    .page-wrapper { max-width: 920px; margin: 0 auto; padding: 2rem 1.5rem 6rem; }
+    /* Hero */
+    .hero {
+      background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
+      border-radius: 20px; padding: 3rem 2.5rem; margin-bottom: 2rem;
+      color: white; position: relative; overflow: hidden;
+    }
+    .hero::after {
+      content: '🤗🍱'; position: absolute; right: 2rem; top: 50%;
+      transform: translateY(-50%); font-size: 6rem; opacity: 0.2;
+    }
+    .hero .week-badge {
+      display: inline-block; background: rgba(255,255,255,0.25);
+      border: 1px solid rgba(255,255,255,0.5); border-radius: 999px;
+      padding: 0.3rem 1rem; font-size: 0.85rem; margin-bottom: 1rem;
+    }
+    .hero h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; }
+    .hero p { font-size: 1.05rem; opacity: 0.95; max-width: 600px; }
+    .objectives { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.5rem; }
+    .obj-tag {
+      background: white; border: 2px solid #f59e0b; border-radius: 999px;
+      padding: 0.35rem 1rem; font-size: 0.85rem; color: #b45309; font-weight: 700;
+    }
+    /* Sections */
+    .class-section {
+      background: white; border-radius: 16px; padding: 2rem;
+      margin-bottom: 1.6rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+      border-left: 5px solid;
+    }
+    .class-section.s1 { border-color: #f59e0b; }
+    .class-section.s2 { border-color: #ef4444; }
+    .class-section.s3 { border-color: #8b5cf6; }
+    .class-section.s4 { border-color: #10b981; }
+    .class-section.s5 { border-color: #3b82f6; }
+    .section-label {
+      font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
+      text-transform: uppercase; margin-bottom: 0.3rem; color: #6b7280;
+    }
+    .s1 .section-label { color: #b45309; }
+    .s2 .section-label { color: #b91c1c; }
+    .s3 .section-label { color: #6d28d9; }
+    .s4 .section-label { color: #047857; }
+    .s5 .section-label { color: #1d4ed8; }
+    .section-title {
+      font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; color: #1a1a2e;
+    }
+    h3 { font-size: 1.05rem; margin: 1.4rem 0 0.6rem; color: #1a1a2e; }
+    p { margin-bottom: 0.8rem; }
+    ul, ol { padding-left: 1.4rem; margin-bottom: 0.8rem; }
+    li { margin-bottom: 0.3rem; }
+    strong { color: #b45309; }
+    /* Why box */
+    .why-box {
+      background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
+      border-left: 4px solid #f59e0b;
+      padding: 1.2rem 1.4rem; border-radius: 10px; margin: 1rem 0;
+    }
+    .why-box .label {
+      font-size: 0.7rem; font-weight: 800; color: #b45309;
+      letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.4rem;
+    }
+    .why-box p:last-child { margin-bottom: 0; }
+    /* Concept grid */
+    .concept-grid {
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+      gap: 0.8rem; margin: 1rem 0;
+    }
+    .concept-card {
+      background: #fef3c7; border-radius: 12px; padding: 1rem;
+      text-align: center;
+    }
+    .concept-card .icon { font-size: 1.8rem; margin-bottom: 0.4rem; }
+    .concept-card .name { font-weight: 700; font-size: 0.95rem; color: #1a1a2e; margin-bottom: 0.3rem; }
+    .concept-card .desc { font-size: 0.78rem; color: #6b7280; line-height: 1.4; }
+    /* Compare table */
+    table {
+      width: 100%; border-collapse: collapse; margin: 1rem 0;
+      font-size: 0.9rem;
+    }
+    th, td {
+      border: 1px solid #e5e7eb; padding: 0.6rem 0.8rem; text-align: left;
+      vertical-align: top;
+    }
+    th { background: #fef3c7; font-weight: 700; color: #92400e; }
+    tr:nth-child(even) td { background: #fafafa; }
+    /* Code */
+    pre {
+      background: #1e293b; color: #e2e8f0; padding: 1rem 1.2rem;
+      border-radius: 10px; overflow-x: auto; font-size: 0.85rem;
+      margin: 0.8rem 0; line-height: 1.55;
+    }
+    code { font-family: 'Consolas', 'Monaco', monospace; }
+    p code, li code {
+      background: #fef3c7; color: #b45309; padding: 0.1rem 0.4rem;
+      border-radius: 4px; font-size: 0.88em;
+    }
+    .comment { color: #94a3b8; }
+    .kw { color: #f59e0b; }
+    .str { color: #86efac; }
+    /* TODO box */
+    .todo-box {
+      background: #fff7ed; border: 2px dashed #f59e0b;
+      border-radius: 10px; padding: 1rem 1.2rem; margin: 0.8rem 0;
+    }
+    .todo-box .num {
+      display: inline-block; background: #f59e0b; color: white;
+      width: 28px; height: 28px; border-radius: 50%;
+      text-align: center; line-height: 28px; font-weight: 700;
+      margin-right: 0.5rem;
+    }
+    /* Steps */
+    .step-list { counter-reset: step; list-style: none; padding: 0; }
+    .step-list li {
+      counter-increment: step; position: relative;
+      padding: 0.6rem 0 0.6rem 2.4rem; margin-bottom: 0.4rem;
+    }
+    .step-list li::before {
+      content: counter(step);
+      position: absolute; left: 0; top: 0.5rem;
+      width: 1.8rem; height: 1.8rem; background: #f59e0b;
+      color: white; border-radius: 50%; text-align: center;
+      line-height: 1.8rem; font-weight: 700; font-size: 0.85rem;
+    }
+    /* Q&A */
+    .qa { background: #f3f4f6; border-radius: 10px; padding: 1rem 1.2rem; margin: 0.8rem 0; }
+    .qa .q { font-weight: 700; color: #b91c1c; margin-bottom: 0.4rem; }
+    .qa .a { color: #374151; }
+    /* Glossary */
+    .glossary dt { font-weight: 700; color: #b45309; margin-top: 0.6rem; }
+    .glossary dd { margin-left: 1rem; color: #374151; font-size: 0.92rem; }
+    /* Mission */
+    .mission {
+      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+      color: white; border-radius: 16px; padding: 2rem;
+      margin-top: 2rem;
+    }
+    .mission h2 { font-size: 1.5rem; margin-bottom: 1rem; }
+    .mission ul { list-style: none; padding: 0; }
+    .mission li { padding: 0.5rem 0 0.5rem 2rem; position: relative; }
+    .mission li::before {
+      content: '☐'; position: absolute; left: 0;
+      font-size: 1.3rem; opacity: 0.9;
+    }
+    footer { text-align: center; color: #9ca3af; font-size: 0.85rem; margin-top: 3rem; }
+  </style>
+</head>
+<body>
+<div class="page-wrapper">
+  <!-- HERO -->
+  <div class="hero">
+    <div class="week-badge">WEEK 06 · 2026 AI웹융합</div>
+    <h1>HuggingFace로 AI 앱 만들고 세상에 공개하기</h1>
+    <p>음식 사진 한 장으로 칼로리를 추정하는 앱을 직접 만들고,
+       HuggingFace Space에 배포해 누구나 접속할 수 있는 공개 URL을 받는다.</p>
+  </div>
+  <!-- OBJECTIVES -->
+  <div class="objectives">
+    <span class="obj-tag">🤗 HF 생태계 이해</span>
+    <span class="obj-tag">🧠 모델 vs 데이터셋 vs Space</span>
+    <span class="obj-tag">🖼️ Inference API 호출</span>
+    <span class="obj-tag">🎛️ Gradio UI</span>
+    <span class="obj-tag">🚀 Space 배포</span>
+  </div>
+  <!-- SECTION 1 -->
+  <section class="class-section s1">
+    <div class="section-label">SECTION 1 · WHY</div>
+    <h2 class="section-title">왜 HuggingFace를 배워야 하는가?</h2>
+    <p>HuggingFace는 단순히 "AI 모델 다운로드 사이트"가 아니다.
+       <strong>오늘날 오픈소스 AI 생태계의 GitHub</strong>에 해당하는 플랫폼이며,
+       전 세계 연구자/기업이 만든 100만 개 이상의 모델·데이터셋·데모가 모여 있다.</p>
+    <div class="why-box">
+      <div class="label">한 줄 요약</div>
+      <p>OpenAI/Anthropic 같은 <strong>폐쇄형(Closed) API</strong>가 "이미 만들어진 자판기"라면,
+         HuggingFace는 <strong>오픈소스(Open-weight) 모델을 골라서 직접 조립할 수 있는 부품 가게 + 작업장 + 전시관</strong>이다.</p>
+    </div>
+    <h3>📌 학생으로서 HF를 배워야 하는 5가지 이유</h3>
+    <ol>
+      <li><strong>비용 0원으로 시작</strong> — 가입만 하면 Inference API/Space를 무료로 쓸 수 있다.
+          OpenAI처럼 카드 등록도, 충전도 필요 없다.</li>
+      <li><strong>다양한 모달리티</strong> — GPT류는 텍스트 중심이지만, HF에는
+          이미지 분류·음성 인식·번역·OCR·세그멘테이션 등 <em>특정 작업에 특화된 작은 모델</em>이 수만 개 있다.</li>
+      <li><strong>모델의 내부를 볼 수 있다</strong> — 가중치(weights)·구조·학습 데이터까지 공개되어 있어
+          "AI가 어떻게 동작하는가"를 실제로 들여다볼 수 있다.</li>
+      <li><strong>한 줄로 배포</strong> — GitHub에 코드 푸시하듯 Space에 푸시하면 곧바로 공개 URL이 생긴다.
+          서버 설정·도메인·SSL 같은 인프라 지식이 없어도 된다.</li>
+      <li><strong>이력서가 된다</strong> — 직접 만든 Space는 채용 담당자나 교수에게
+          "나는 AI를 쓸 줄 안다"를 증명하는 가장 빠른 방법이다.</li>
+    </ol>
+    <h3>🆚 OpenAI API vs HuggingFace</h3>
+    <table>
+      <tr><th>관점</th><th>OpenAI API</th><th>HuggingFace</th></tr>
+      <tr><td>모델 종류</td><td>GPT 계열 몇 개</td><td>100만+ 오픈 모델</td></tr>
+      <tr><td>비용</td><td>토큰당 과금</td><td>무료 티어 (Inference API/Space)</td></tr>
+      <tr><td>모델 가중치</td><td>비공개</td><td>대부분 공개 (다운로드 가능)</td></tr>
+      <tr><td>로컬 실행</td><td>불가능</td><td>가능 (transformers 라이브러리)</td></tr>
+      <tr><td>커스터마이즈</td><td>프롬���트 수준</td><td>파인튜닝까지 가능</td></tr>
+      <tr><td>UI 배포</td><td>직접 만들어야 함</td><td>Spaces로 한 번에</td></tr>
+    </table>
+    <div class="why-box">
+      <p>AI 모델 생태계는 크게 두 진영으로 나뉩니다. <br>
+         <strong>Closed 진영의 대표주자가 OpenAI</strong>라면,
+         <strong>Open 진영의 대표주자가 HuggingFace</strong>입니다.
+      </p>
+    </div>
+  </section>
+  <!-- SECTION 2 -->
+  <section class="class-section s2">
+    <div class="section-label">SECTION 2 · CONCEPT</div>
+    <h2 class="section-title">HuggingFace 생태계 한눈에 보기</h2>
+    <p>HF에 처음 들어가면 메뉴가 많아 어지럽다. 사실 핵심은 <strong>4개의 기둥</strong>뿐이다.</p>
+    <div class="concept-grid">
+      <div class="concept-card">
+        <div class="icon">🧠</div>
+        <div class="name">Models</div>
+        <div class="desc">학습된 AI 모델 저장소.<br>가중치·코드·사용법 포함</div>
+      </div>
+      <div class="concept-card">
+        <div class="icon">📊</div>
+        <div class="name">Datasets</div>
+        <div class="desc">학습/평가용 데이터셋.<br>한 줄 코드로 로딩 가능</div>
+      </div>
+      <div class="concept-card">
+        <div class="icon">🚀</div>
+        <div class="name">Spaces</div>
+        <div class="desc">AI 데모를 호스팅하는<br>무료 웹앱 플랫폼</div>
+      </div>
+      <div class="concept-card">
+        <div class="icon">⚡</div>
+        <div class="name">Inference API</div>
+        <div class="desc">모델을 다운 안 받고<br>HTTP로 바로 호출</div>
+      </div>
+    </div>
+    <h3>🧠 Model Hub — "AI 모델의 GitHub"</h3>
+    <p>한 모델 페이지에는 다음이 들어 있다:</p>
+    <ul>
+      <li><strong>Model Card</strong> — 이 모델이 무엇을 하는지, 어떻게 학습했는지, 한계는 무엇인지 적힌 설명서</li>
+      <li><strong>Files and versions</strong> — 가중치 파일(.safetensors), 토크나이저, 설정 파일</li>
+      <li><strong>Inference API 위젯</strong> — 페이지 우측에서 바로 모델을 테스트해볼 수 있는 박스</li>
+      <li><strong>커뮤니티 탭</strong> — 다른 사용자의 질문/이슈</li>
+    </ul>
+    <p>오늘 우리가 쓸 모델: <code>nateraw/food</code> — Vision Transformer(ViT)를
+       Food-101 데이터셋으로 파인튜닝한 음식 이미지 분류기.</p>
+    <h3>🚀 Spaces — "AI 데모의 Vercel/Netlify"</h3>
+    <p>Space는 한마디로 <strong>"AI 앱을 깃 푸시 한 번으로 배포해주는 무료 호스팅"</strong>이다.</p>
+    <ul>
+      <li>지원 SDK: <strong>Gradio</strong>(파이썬 UI), <strong>Streamlit</strong>, <strong>Static HTML</strong>, <strong>Docker</strong></li>
+      <li>무료 하드웨어: 2 vCPU + 16GB RAM (CPU Basic)</li>
+      <li>각 Space는 git 저장소이며 <code>https://huggingface.co/spaces/&lt;유저&gt;/&lt;이름&gt;</code> 주소를 받는다</li>
+      <li>비공개 토큰은 <em>Settings → Secrets</em>에 등록한다 (코드에는 절대 적지 않음)</li>
+    </ul>
+    <h3>⚡ Inference API — "모델을 부르는 두 가지 방법"</h3>
+    <table>
+      <tr><th>방식</th><th>사용 시점</th><th>특징</th></tr>
+      <tr>
+        <td><strong>로컬 실행</strong><br>(transformers)</td>
+        <td>모델을 내 컴퓨터/서버에 다운로드해 직접 돌림</td>
+        <td>속도 빠름, 비용 0, 그러나 GPU/RAM 필요</td>
+      </tr>
+      <tr>
+        <td><strong>Inference API</strong><br>(InferenceClient)</td>
+        <td>HF 서버에 HTTP 요청만 보내고 결과 받음</td>
+        <td>설치 불필요, 작은 노트북에서도 동작 ✅</td>
+      </tr>
+    </table>
+    <p>이번 주차는 후자(Inference API)를 쓴다. 학생용 노트북에 GPU가 없어도 동작하기 때문이다.</p>
+  </section>
+  <!-- SECTION 2.5 -->
+  <section class="class-section s4">
+    <div class="section-label">SECTION 2.5 · GUIDED TOUR</div>
+    <h2 class="section-title">HuggingFace 사이트 완전 정복 가이드</h2>
+    <p>처음 접속하면 메뉴가 너무 많아 당황한다. 이 섹션은 <strong>"어디를 클릭하면 무엇이 나오는가"</strong>를
+       지도처럼 정리한 것이다. 강의 중에 화면을 띄워놓고 같이 따라가자.</p>
+    <h3>🏠 1. 메인 페이지 — 상단 내비게이션</h3>
+    <p><a href="https://huggingface.co">huggingface.co</a> 접속 시 상단에 보이는 메뉴:</p>
+    <img src="images/01_main.png" alt="HuggingFace 메인 페이지" style="width:100%;max-width:900px;border:1px solid #e5e7eb;border-radius:8px;margin:0.6rem 0;">
+    <p style="color:#6b7280;font-size:0.9em;">위 이미지의 색깔 번호 ①~⑤가 아래 표와 매칭된다.</p>
+    <table>
+      <tr><th>번호</th><th>메뉴</th><th>무엇이 있는가</th><th>언제 클릭하나</th></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#ef4444;color:white;text-align:center;font-weight:bold;">1</span></td><td><strong>Models</strong></td><td>100만+ 사전학습 모델</td><td>"이런 일을 하는 모델 있나?" 검색할 때</td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#f97316;color:white;text-align:center;font-weight:bold;">2</span></td><td><strong>Datasets</strong></td><td>학습/평가용 데이터셋</td><td>모델을 직접 학습시킬 때</td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#0ea5e9;color:white;text-align:center;font-weight:bold;">3</span></td><td><strong>Spaces</strong></td><td>다른 사람들이 만든 AI 데모</td><td>아이디어 얻고 싶을 때 / 내 앱 배포할 때</td></tr>
+      <tr><td>—</td><td><strong>Buckets</strong> <span style="background:#fbbf24;color:#78350f;font-size:0.7em;padding:2px 6px;border-radius:4px;">NEW</span></td><td>AI 팀용 오브젝트 스토리지 (TB당 $8~18/월, Xet 중복제거 + CDN, <code>hf sync</code>로 git 없이 대용량 동기화)</td><td>대용량 모델/데이터셋을 S3 대신 HF에 저장할 때 — 수업에서는 무시 OK</td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#10b981;color:white;text-align:center;font-weight:bold;">4</span></td><td><strong>Docs</strong></td><td>공식 문서</td><td>라이브러리 사용법 막힐 때</td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#8b5cf6;color:white;text-align:center;font-weight:bold;">5</span></td><td><strong>Pricing</strong></td><td>무료/유료 플랜</td><td>"PRO 계정 뭔지" 궁금할 때</td></tr>
+    </table>
+    <h3>🧠 2. Models 탭 깊이 파기</h3>
+    <p><a href="https://huggingface.co/models">huggingface.co/models</a> 접속 → 화면 구성은 크게 <strong>좌측 사이드바(필터)</strong> + <strong>본문(모델 리스트)</strong>이고, 본문 우측 상단에 <strong>검색창과 정렬 옵션</strong>이 붙어있다:</p>
+    <img src="images/02_models.png" alt="HuggingFace Models 탭 — 좌측 필터 사이드바, 본문 모델 리스트, 우측 상단 검색/정렬" style="width:100%;max-width:900px;border:1px solid #e5e7eb;border-radius:8px;margin:0.6rem 0;">
+    <p style="color:#6b7280;font-size:0.9em;">위 이미지에 ①(빨강) 사이드바, ②(파랑) 모델 리스트, ③(초록) 검색·정렬 영역이 표시되어 있다.</p>
+    <h4 style="margin:0.8rem 0 0.4rem; color:#047857;"><span style="display:inline-block;width:22px;height:22px;border-radius:50%;background:#ef4444;color:white;text-align:center;font-weight:bold;font-size:0.85em;">1</span> 좌측 사이드바: 필터 패널</h4>
+    <ul>
+      <li><strong>Tasks</strong> — 모델이 하는 일로 거르기. 가장 많이 쓰는 카테고리:
+        <ul>
+          <li><em>Multimodal</em>: Image-Text-to-Text, Visual QA</li>
+          <li><em>Computer Vision</em>: Image Classification, Object Detection, Image Segmentation</li>
+          <li><em>Natural Language Processing</em>: Text Generation, Translation, Summarization, Sentiment</li>
+          <li><em>Audio</em>: Speech Recognition (ASR), Text-to-Speech (TTS)</li>
+        </ul>
+      </li>
+      <li><strong>Libraries</strong> — Transformers / Diffusers / GGUF 등 — 일단 기본값(Transformers)으로 두면 됨</li>
+      <li><strong>Languages</strong> — "korean" 체크하면 한국어 지원 모델만 표시</li>
+      <li><strong>Licenses</strong> — 상업적 이용 가능 여부. <em>apache-2.0</em>, <em>mit</em> = 자유롭게 사용 OK / <em>cc-by-nc</em> = 비상업용만</li>
+    </ul>
+    <h4 style="margin:0.8rem 0 0.4rem; color:#047857;"><span style="display:inline-block;width:22px;height:22px;border-radius:50%;background:#0ea5e9;color:white;text-align:center;font-weight:bold;font-size:0.85em;">2</span> 본문: 모델 리스트</h4>
+    <p>각 카드에는 다음 정보가 보인다:</p>
+    <ul>
+      <li><strong>모델 이름</strong> = <code>유저ID/모델명</code> 형식 (예: <code>nateraw/food</code>)</li>
+      <li><strong>♥ 좋아요 수</strong> — 커뮤니티 인기도</li>
+      <li><strong>↓ 다운로드 수</strong> — 지난 한 달 사용량 (가장 신뢰할 만한 지표)</li>
+      <li><strong>마지막 업데이트 날짜</strong> — 1년 넘은 모델은 더 좋은 후속 모델이 있을 가능성</li>
+    </ul>
+    <div class="why-box">
+      <div class="label">초보자용 모델 고르는 법 (3초 룰)</div>
+      <p>① 다운로드 수 1만+ &nbsp; ② 좋아요 100+ &nbsp; ③ 라이선스 apache/mit &nbsp; ④ 최근 6개월 내 업데이트<br>
+        — 4개 다 만족하면 일단 믿고 써도 된다.</p>
+    </div>
+    <h4 style="margin:0.8rem 0 0.4rem; color:#047857;"><span style="display:inline-block;width:22px;height:22px;border-radius:50%;background:#10b981;color:white;text-align:center;font-weight:bold;font-size:0.85em;">3</span> 본문 우측 상단: 검색창 + 정렬</h4>
+    <ul>
+      <li><strong>검색창</strong>: 키워드 검색 (예: "korean sentiment", "food", "whisper")</li>
+      <li><strong>Sort by</strong>: <em>Trending</em>(요즘 뜨는 것) / <em>Most likes</em> / <em>Most downloads</em> / <em>Recently updated</em></li>
+    </ul>
+    <h3>📄 3. 모델 카드 페이지 해부도</h3>
+    <p>예시: <a href="https://huggingface.co/nateraw/food">huggingface.co/nateraw/food</a> 클릭 시 보이는 화면.</p>
+    <img src="images/03_model_card.png" alt="nateraw/food 모델 카드 페이지" style="width:100%;max-width:900px;border:1px solid #e5e7eb;border-radius:8px;margin:0.6rem 0;">
+    <p style="color:#6b7280;font-size:0.9em;">위 이미지의 색깔 박스 ①②③ 가 아래 표 항목과 매칭된다.</p>
+    <table>
+      <tr><th>번호</th><th>영역</th><th>내용</th><th>학생이 봐야 할 부분</th></tr>
+      <tr>
+        <td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#ef4444;color:white;text-align:center;font-weight:bold;">1</span></td>
+        <td><strong>탭 바</strong> — Model card / Files and versions / Training metrics / Community</td>
+        <td><em>Model card</em>는 README.md 렌더링, <em>Files and versions</em>는 실제 파일, <em>Training metrics</em>는 학습 곡선, <em>Community</em>는 이슈 게시판</td>
+        <td>먼저 <em>Model card</em> 맨 위 한두 줄로 "뭐 하는 모델"인지 파악 → <em>Files</em>에서 <code>config.json</code>·<code>*.safetensors</code> 확인 → <em>Community</em>에서 함정 정보 검색</td>
+      </tr>
+      <tr>
+        <td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#0ea5e9;color:white;text-align:center;font-weight:bold;">2</span></td>
+        <td><strong>Inference Providers 박스</strong> (우측)</td>
+        <td><code>HF Inference API</code> 제공자 + 작업명(예: <em>Image Classification</em>) 표시. 점선 박스에 "Drag image file here or click to browse from your device"</td>
+        <td>사진을 드래그/클릭 업로드하면 라벨·점수가 즉시 표시. 아래 <em>View Code Snippets</em> / <em>Maximize</em> 버튼으로 코드 보기·확대</td>
+      </tr>
+      <tr>
+        <td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#10b981;color:white;text-align:center;font-weight:bold;">3</span></td>
+        <td><strong>Deploy</strong> / <strong>Use this model</strong> 버튼 (상단 우측)</td>
+        <td>코드 스니펫 복붙용 드롭다운</td>
+        <td>Transformers / Inference Providers / Endpoints 코드 자동 생성 → 우리 실습은 <em>Inference Providers</em>(=HF Inference API) 사용</td>
+      </tr>
+      <tr>
+        <td>—</td>
+        <td>모델 카드 하단 메타정보</td>
+        <td>license, base_model, datasets, metrics</td>
+        <td><strong>license</strong> — 상업적 사용 가능 여부 확인 / <strong>base_model</strong> — 어떤 모델을 fine-tune 했는지 추적</td>
+      </tr>
+    </table>
+    <h3>🎮 4. 위젯 사용법 — 코드 한 줄 없이 모델 테스트</h3>
+    <p>모델 카드 우측의 박스가 <strong>Inference API 위젯</strong>이다. 모달리티별로 입력 방식이 다르다:</p>
+    <ul>
+      <li><strong>Image Classification</strong>: 사진 드래그 → "Compute" → top-5 라벨과 점수가 막대그래프로 표시</li>
+      <li><strong>Text Generation</strong>: 텍스트 입력 → 모델이 이어서 생성</li>
+      <li><strong>Translation</strong>: 원문 입력 → 번역 결과</li>
+      <li><strong>ASR</strong>: 오디오 파일 업로드 또는 마이크 녹음 → 텍스트</li>
+      <li><strong>Object Detection</strong>: 사진 → 박스가 그려진 결과 이미지</li>
+    </ul>
+    <div class="why-box">
+      <div class="label">위젯이 안 보이거나 에러가 날 때</div>
+      <p>① "Inference API has been turned off" → 모델 제작자가 비활성화한 경우. 다른 모델로 갈아탄다.<br>
+        ② 첫 호출에서 ~20초 멈춤 → <strong>cold start</strong>. 한 번 더 누르면 빠르다.<br>
+        ③ "Loading..." 무한 반복 → 모델이 너무 큼. 더 작은 동급 모델 검색.</p>
+    </div>
+    <h3>🛠️ 5. "Use this model" 버튼 — 코드 자동 생성</h3>
+    <p>모델 페이지 우측 상단의 <strong>&lt;/&gt; Use this model</strong> 버튼을 누르면 드롭다운에서 사용 방식을 고를 수 있다:</p>
+    <table>
+      <tr><th>옵션</th><th>의미</th><th>이번 주차에서</th></tr>
+      <tr><td><strong>Transformers</strong></td><td>로컬 다운로드 후 직접 실행</td><td>❌ (GPU 필요)</td></tr>
+      <tr><td><strong>Inference API (Serverless)</strong></td><td>HF 서버에 HTTP 호출 — 무료</td><td>✅ <strong>우리가 쓰는 방식</strong></td></tr>
+      <tr><td><strong>Inference Endpoints</strong></td><td>전용 인스턴스 — 유료, 항상 켜짐</td><td>❌ (실서비스용)</td></tr>
+    </table>
+    <p>버튼을 누르면 <strong>복붙 가능한 Python 코드</strong>가 바로 나온다. 우리가 쓸 패턴은 이렇게 생겼다:</p>
+    <pre><span class="kw">from</span> huggingface_hub <span class="kw">import</span> InferenceClient
+client = InferenceClient(token=<span class="str">"hf_..."</span>)
+result = client.image_classification(
+    <span class="str">"food.jpg"</span>,
+    model=<span class="str">"nateraw/food"</span>,
+)
+<span class="kw">print</span>(result)
+<span class="comment"># [{'label': 'pizza', 'score': 0.92}, ...]</span></pre>
+    <h3>🚀 6. Spaces 탭 활용법</h3>
+    <p><a href="https://huggingface.co/spaces">huggingface.co/spaces</a> — 다른 사람들이 만든 AI 데모 모음.</p>
+    <img src="images/04_spaces.png" alt="HuggingFace Spaces — Spaces of the week" style="width:100%;max-width:900px;border:1px solid #e5e7eb;border-radius:8px;margin:0.6rem 0;">
+    <p style="color:#6b7280;font-size:0.9em;">위 이미지의 ①(빨강) 카테고리 탭, ②(파랑) Spaces of the week 카드 그리드, ③(초록) 검색·필터·정렬 영역.</p>
+    <ul>
+      <li><span style="display:inline-block;width:22px;height:22px;border-radius:50%;background:#ef4444;color:white;text-align:center;font-weight:bold;font-size:0.85em;">1</span> <strong>카테고리 탭</strong> — Image Generation, Video Generation, Speech Synthesis 등 작업별로 빠르게 둘러보기</li>
+      <li><span style="display:inline-block;width:22px;height:22px;border-radius:50%;background:#0ea5e9;color:white;text-align:center;font-weight:bold;font-size:0.85em;">2</span> <strong>Spaces of the week (카드 그리드)</strong> — 매주 큐레이션. 카드 클릭 → 데모 실행. 우측 <strong>⋮ → Duplicate this Space</strong>로 내 계정에 복사 → 코드 수정 가능</li>
+      <li><span style="display:inline-block;width:22px;height:22px;border-radius:50%;background:#10b981;color:white;text-align:center;font-weight:bold;font-size:0.85em;">3</span> <strong>Filter / Sort</strong> — 이름 검색, Filters, Sort(Relevance / Trending / Most likes 등)</li>
+      <li><strong>카드 클릭 시 Space 상세 페이지</strong>로 이동 — 페이지 상단에 4개 탭이 있다:
+        <ul>
+          <li><strong>App</strong>: 실제로 돌아가는 데모 화면 (Gradio/Streamlit UI)</li>
+          <li><strong>Files</strong>: 소스 코드 (<code>app.py</code>, <code>requirements.txt</code> 등). 오픈소스라 그대로 열람·복사 가능</li>
+          <li><strong>Community</strong>: 질문·이슈 게시판</li>
+          <li><strong>Settings</strong>: 작성자만 보는 설정 (Secrets, 하드웨어 선택 등)</li>
+        </ul>
+        👉 이번 주차에 우리가 직접 배포할 Space도 <strong>똑같은 4개 탭 구조</strong>를 갖게 된다. 즉 지금 보는 남의 Space가 곧 내 Space의 미리보기라고 생각하면 된다.</li>
+    </ul>
+    <h3>🔑 7. 토큰 발급 — 한 번만 하면 평생 사용</h3>
+    <img src="images/05_tokens.png" alt="Settings → Access Tokens 페이지" style="width:100%;max-width:900px;border:1px solid #e5e7eb;border-radius:8px;margin:0.6rem 0;">
+    <ol class="step-list">
+      <li>우측 상단 프로필 사진 → <strong>Settings</strong></li>
+      <li>좌측 메뉴에서 <strong>Access Tokens</strong></li>
+      <li><strong>+ Create new token</strong> 버튼</li>
+      <li>Token type: <strong>Read</strong> (가장 안전, Inference API 호출에 충분)</li>
+      <li>이름은 자유롭게 (예: <code>week06-class</code>)</li>
+      <li>생성된 토큰 <code>hf_xxxxxxxxxx...</code>를 즉시 복사 → <strong>다시는 못 본다</strong></li>
+    </ol>
+    <div class="why-box">
+      <div class="label">⚠️ 토큰 보안 3원칙</div>
+      <p>① <strong>코드에 절대 직접 적지 않는다</strong> → <code>.env</code> 파일 또는 Space Secrets 사용<br>
+        ② <strong>git에 커밋하지 않는다</strong> → <code>.gitignore</code>에 <code>.env</code> 추가 필수<br>
+        ③ <strong>실수로 노출되면 즉시 Revoke</strong> → 토큰 페이지에서 휴지통 아이콘 클릭</p>
+    </div>
+    <h3>🔍 8. 검색 꿀팁 (실전)</h3>
+    <ul>
+      <li><strong>한국어 모델 찾기</strong>: 검색창에 <code>korean</code> + Languages 필터에서 <code>ko</code> 체크</li>
+      <li><strong>가벼운 모델 우선</strong>: 모델 이름에 <code>tiny</code>, <code>small</code>, <code>base</code>, <code>distil</code>이 들어간 것은 경량 버전</li>
+      <li><strong>최신 모델만</strong>: Sort = "Recently updated" + 1주일 이내</li>
+      <li><strong>특정 회사/연구소 모델</strong>: <code>google/</code>, <code>microsoft/</code>, <code>meta-llama/</code>, <code>openai/</code> 검색</li>
+      <li><strong>Trending</strong> 탭만 봐도 일주일에 5분이면 AI 업계 동향이 잡힌다</li>
+    </ul>
+    <h3>🗺️ 9. 실습 전 체크리스트 (수업 중 함께 진행)</h3>
+    <div class="todo-box">
+      <div><span class="num">✓</span>HF 가입 완료</div>
+      <div><span class="num">✓</span>프로필 사진 등록 (선택, 분위기 UP)</div>
+      <div><span class="num">✓</span>Read 토큰 1개 발급 → 안전한 곳에 저장</div>
+      <div><span class="num">✓</span><code>nateraw/food</code> 모델 페이지 열어보고 위젯에 사진 1장 넣어보기</div>
+      <div><span class="num">✓</span>Trending Spaces에서 마음에 드는 거 1개 찾아보기</div>
+    </div>
+  </section>
+  <!-- SECTION 3 -->
+  <section class="class-section s3">
+    <div class="section-label">SECTION 3 · APP DESIGN</div>
+    <h2 class="section-title">우리가 만들 앱: 칼로리 카운터</h2>
+    <p>음식 사진 1장 → 음식 이름 + 1인분 기준 칼로리·탄단지 추정값을 돌려주는 작은 AI 앱이다.</p>
+    <h3>🔄 데이터 흐름 (Pipeline)</h3>
+    <pre><span class="comment"># [1] 사용자가 음식 사진 업로드 (Gradio UI)
+        ↓
+# [2] HF Vision 모델 (nateraw/food) 이 top-3 음식 후보 반환
+        ↓                  e.g. [{label:"pizza", score:0.92}, ...]
+# [3] LLM (Llama-3-8B-Instruct) 에게
+       "이 음식의 1인분 칼로리/탄단지를 JSON으로 알려줘" 요청
+        ↓
+# [4] JSON 파싱 → Gradio가 결과 카드로 표시</span></pre>
+    <h3>🧩 두 모델을 조합하는 이유</h3>
+    <div class="why-box">
+      <div class="label">설계 포인트</div>
+      <p>이미지 분류 모델은 "이게 피자다"는 알지만 칼로리는 모른다.<br>
+         반대로 LLM은 "피자 1인분 ≈ 285kcal"는 알지만 사진은 못 본다.<br>
+         <strong>두 모델을 파이프라인으로 연결</strong>하는 것이 이번 실습의 핵심 아이디어다.
+         이런 식으로 작은 모델 여러 개를 엮는 패턴을
+         <em>compound AI system</em>이라 부른다.</p>
+    </div>
+    <h3>📁 파일 구조</h3>
+    <pre>week06/
+├── app.py              <span class="comment"># Gradio 앱 본체 (TODO 4곳을 채워 완성)</span>
+├── model_config.py     <span class="comment"># HF 모델 이름 + InferenceClient 팩토리</span>
+├── requirements.txt    <span class="comment"># Space가 설치할 의존성</span>
+├── .env.example        <span class="comment"># HF_TOKEN 템플릿</span>
+└── README.md           <span class="comment"># 앞부분 YAML이 Space 설정</span></pre>
+  </section>
+  <!-- SECTION 4 -->
+  <section class="class-section s4">
+    <div class="section-label">SECTION 4 · HANDS-ON</div>
+    <h2 class="section-title">실습: 코드 채우기 → 로컬 실행 → 배포</h2>
+    <h3>① 사전 준비</h3>
+    <ol class="step-list">
+      <li>HF 가입: <a href="https://huggingface.co/join">huggingface.co/join</a></li>
+      <li>토큰 발급: <a href="https://huggingface.co/settings/tokens">Settings → Access Tokens → New token</a> (Read 권한)</li>
+      <li><code>cp .env.example .env</code> 후 <code>HF_TOKEN=hf_...</code> 입력</li>
+      <li><code>uv pip install -r requirements.txt</code></li>
+    </ol>
+    <h3>② 채워야 할 TODO 4곳 (app.py) — LangChain LCEL 버전</h3>
+    <div class="why-box">
+      <div class="label">왜 LangChain?</div>
+      <p>5주차에서 LangGraph를 배웠다. 6주차도 같은 생태계(LangChain)로 이어간다.
+        LangChain의 <strong>LCEL(LangChain Expression Language)</strong>은 파이썬의 <code>|</code> 연산자로
+        <em>prompt → llm → parser</em>를 한 줄로 엮는 표현식이다.
+        칼로리 카운터의 LLM 파트가 그대로 <strong>체인 객체</strong>가 된다.</p>
+    </div>
+    <div class="todo-box">
+      <div><span class="num">1</span><strong>SYSTEM_PROMPT</strong> — 영양사 역할 + JSON 스키마 강제
+        <br><em>(ChatPromptTemplate에 들어가므로 JSON 중괄호는 <code>{{ }}</code>로 이스케이프)</em></div>
+      <pre><span class="kw">SYSTEM_PROMPT</span> = <span class="str">"""너는 한국 영양사 AI다.
+사용자가 음식 분류 결과(top-k labels)를 주면,
+가장 가능성 높은 음식 1개의 1인분 기준 영양정보를 추정해
+반드시 다음 JSON 스키마만 출력하라. 다른 텍스트/마크다운 금지.
+{{"food": "음식명", "confidence": 0.0~1.0,
+  "calories_kcal": 정수, "carbs_g": 정수,
+  "protein_g": 정수, "fat_g": 정수,
+  "note": "추정 근거 한 줄"}}"""</span></pre>
+    </div>
+    <div class="todo-box">
+      <div><span class="num">2</span><strong>classify_food()</strong> — HF 이미지 분류 호출
+        <br><em>(이미지 분류는 LangChain에 래퍼가 없어서 InferenceClient 직접 사용)</em></div>
+      <pre>raw = client.<span class="kw">image_classification</span>(image, model=VISION_MODEL)</pre>
+    </div>
+    <div class="todo-box">
+      <div><span class="num">3</span><strong>_chain_lazy()</strong> — LCEL 체인 만들기 (4단계)</div>
+      <pre><span class="comment"># 3-1. HF Inference Endpoint 생성</span>
+endpoint = <span class="kw">HuggingFaceEndpoint</span>(
+    repo_id=LLM_MODEL,
+    task=<span class="str">"text-generation"</span>,
+    max_new_tokens=300,
+    temperature=0.2,
+    huggingfacehub_api_token=get_token(),
+)
+<span class="comment"># 3-2. 채팅 인터페이스로 감싸기</span>
+llm = <span class="kw">ChatHuggingFace</span>(llm=endpoint)
+<span class="comment"># 3-3. 프롬프트 템플릿</span>
+prompt = <span class="kw">ChatPromptTemplate</span>.from_messages([
+    (<span class="str">"system"</span>, SYSTEM_PROMPT),
+    (<span class="str">"human"</span>, <span class="str">"다음은 이미지 분류기의 top-k 결과다:\n{labels_json}"</span>),
+])
+<span class="comment"># 3-4. LCEL 파이프라인 — 이 한 줄이 핵심!</span>
+_chain = prompt | llm | <span class="kw">JsonOutputParser</span>()</pre>
+    </div>
+    <div class="todo-box">
+      <div><span class="num">4</span><strong>estimate_calories()</strong> — 체인 실행</div>
+      <pre>chain = _chain_lazy()
+labels_json = json.dumps(labels, ensure_ascii=<span class="kw">False</span>)
+<span class="kw">return</span> chain.<span class="kw">invoke</span>({<span class="str">"labels_json"</span>: labels_json})</pre>
+    </div>
+    <div class="why-box">
+      <div class="label">LCEL의 아름다움</div>
+      <p><code>prompt | llm | JsonOutputParser()</code> — 이 한 줄을 기억하자.<br>
+        ① prompt가 입력 dict를 받아 메시지 리스트로 변환<br>
+        ② llm이 메시지를 받아 응답 생성<br>
+        ③ JsonOutputParser가 응답에서 JSON만 뽑아 dict로 돌려줌<br>
+        이 세 단계가 파이썬의 <code>|</code> 연산자 하나로 조립된다.
+        나중에 <em>retriever</em>, <em>tool</em>, <em>agent</em>를 추가해도 같은 방식으로 늘어난다.</p>
+    </div>
+    <h3>③ 로컬 실행</h3>
+    <pre>uv run python app.py
+<span class="comment"># → http://127.0.0.1:7860 접속</span></pre>
+    <h3>④ Space 배포</h3>
+    <p>완성한 앱을 HuggingFace Space에 올려 공개 URL로 만든다. 단계별 상세 가이드(Space 생성 → Secret 등록 → 파일 업로드 → 빌드 로그 → 트러블슈팅 → 재배포)는 아래 전용 섹션으로 정리해두었다.</p>
+    <p>👉 <a href="#section-deploy"><strong>SECTION 9 · DEPLOY — HuggingFace Space 배포 A to Z</strong></a> 로 이동</p>
+  </section>
+  <!-- SECTION 5 -->
+  <section class="class-section s5">
+    <div class="section-label">SECTION 5 · DEEP DIVE</div>
+    <h2 class="section-title">자주 나오는 질문 & 용어 정리</h2>
+    <div class="qa">
+      <div class="q">Q. 왜 LLM에게 "JSON만 출력하라"고 강제하나요?</div>
+      <div class="a">LLM은 자연어를 잘 만들지만 자유롭게 두면 매번 형식이 달라진다.
+        앱에서는 항상 같은 키(<code>calories_kcal</code> 등)로 값을 꺼내야 하므로
+        <strong>구조화된 출력(structured output)</strong>이 필수다. 시스템 프롬프트로 스키마를 강제하는 것이 가장 단순한 방법.</div>
+    </div>
+    <div class="qa">
+      <div class="q">Q. 칼로리가 정확한가요?</div>
+      <div class="a">아니다. LLM이 추정한 "참고용 수치"다.
+        실제 다이어트 앱이라면 USDA FoodData Central 같은 <em>실제 영양 DB</em>를 붙여야 한다.
+        이번 주차는 "AI 모델 두 개를 엮는 패턴"을 익히는 것이 목표.</div>
+    </div>
+    <div class="qa">
+      <div class="q">Q. Inference API가 갑자기 503 에러를 뱉어요.</div>
+      <div class="a">무료 티어 모델은 사용량이 없을 때 잠들어 있다가(<em>cold start</em>)
+        첫 호출 시 ~20초 동안 로딩한다. 잠시 기다렸다가 재시도하면 된다.
+        실서비스라면 <em>Inference Endpoints</em>(유료, 항상 켜짐)로 이전해야 한다.</div>
+    </div>
+    <div class="qa">
+      <div class="q">Q. Gradio 대신 Streamlit을 써도 되나요?</div>
+      <div class="a">물론. Space 생성 시 SDK만 바꿔주면 된다.
+        Gradio는 "AI 데모"에, Streamlit은 "데이터 대시보드"에 더 강하다.
+        이번 주차는 입출력이 단순해서 Gradio가 더 간결하다.</div>
+    </div>
+    <div class="qa">
+      <div class="q">Q. HF_TOKEN을 깜빡하고 git에 푸시했어요.</div>
+      <div class="a">즉시 <a href="https://huggingface.co/settings/tokens">토큰 페이지</a>에서
+        <strong>해당 토큰을 Revoke</strong>하고 새로 발급할 것. git history에 남아 있어도 무효화되면 안전하다.</div>
+    </div>
+    <h3>📖 핵심 용어</h3>
+    <dl class="glossary">
+      <dt>Pre-trained model</dt>
+      <dd>대량의 데이터로 미리 학습된 모델. 우리는 처음부터 학습하지 않고 그대로 가져다 쓴다.</dd>
+      <dt>Fine-tuning</dt>
+      <dd>사전학습 모델 위에 특정 도메인 데이터를 추가 ���습시키는 것. <code>nateraw/food</code>는 ViT를 음식 사진으로 파인튜닝한 결과.</dd>
+      <dt>Inference</dt>
+      <dd>학습된 모델에 입력을 넣어 예측을 얻는 단계. ↔ Training</dd>
+      <dt>Top-k</dt>
+      <dd>분류 모델이 가장 가능성 높다고 판단한 상위 k개 후보. 단일 정답보다 후보 여러 개를 LLM에 넘기면 더 안정적이다.</dd>
+      <dt>System prompt</dt>
+      <dd>LLM에게 "너는 누구이며 어떻게 행동해야 하는가"를 지시하는 첫 메시지. 출력 형식 강제에 자주 쓰인다.</dd>
+      <dt>Cold start</dt>
+      <dd>잠들어 있던 무료 모델이 처음 깨어나는 데 걸리는 지연 시간.</dd>
+      <dt>Compound AI system</dt>
+      <dd>여러 모델/도구를 파이프라인으로 엮어 하나의 작업을 수행하는 시스템. 우리 칼로리 카운터(분류기 + LLM)가 가장 작은 예시.</dd>
+    </dl>
+  </section>
+  <!-- SECTION 6 -->
+  <section class="class-section s1">
+    <div class="section-label">SECTION 6 · LAB A (20분)</div>
+    <h2 class="section-title">Lab A. HF Hub 탐험 & 모델 발표</h2>
+    <p>HuggingFace를 "코드로만" 만나면 절대 익숙해지지 않는다.
+       먼저 <strong>웹사이트를 직접 쇼핑몰처럼 둘러보는 경험</strong>이 필요하다.</p>
+    <h3>🗺️ 진행 방법</h3>
+    <ol class="step-list">
+      <li><a href="https://huggingface.co/models">huggingface.co/models</a> 접속 → 좌측 필터에서 <strong>Tasks</strong> 패널 열기</li>
+      <li>아래 5개 카테고리 중 <strong>본인이 끌리는 1개</strong>를 고른다
+        <ul>
+          <li><strong>Image Classification</strong> (예: 동물·식물·의류 분류)</li>
+          <li><strong>Object Detection</strong> (사진 속 사물 박스로 잡기)</li>
+          <li><strong>Automatic Speech Recognition</strong> (음성 → 텍스트, Whisper 등)</li>
+          <li><strong>Translation</strong> (한↔영, 한↔일)</li>
+          <li><strong>Text-to-Image</strong> (Stable Diffusion 계열)</li>
+        </ul>
+      </li>
+      <li>해당 카테고리에서 <strong>다운로드 수가 많은 모델 1개</strong>를 골라 모델 카드를 정독한다</li>
+      <li>모델 페이지 우측의 <strong>Inference API 위젯</strong>에 직접 입력을 넣고 결과를 확인한다</li>
+      <li>아래 5가지를 정리해 옆 사람과 1분씩 발표한다</li>
+    </ol>
+    <h3>📋 발표 카드 (정리 양식)</h3>
+    <table>
+      <tr><th>항목</th><th>적을 내용</th></tr>
+      <tr><td>모델 이름</td><td>예: <code>openai/whisper-large-v3</code></td></tr>
+      <tr><td>무엇을 하는 모델?</td><td>한 줄 설명</td></tr>
+      <tr><td>학습 데이터</td><td>모델 카드의 "Training data" 섹션 요약</td></tr>
+      <tr><td>위젯 테스트 결과</td><td>내가 넣은 입력 → 출력</td></tr>
+      <tr><td>이걸로 만들 수 있는 앱 아이디어</td><td>1줄</td></tr>
+    </table>
+    <div class="why-box">
+      <div class="label">교수의 의도</div>
+      <p>이 활동의 진짜 목적은 "모델을 하나 외우는 것"이 아니라
+        <strong>"필요할 때 HF에서 적합한 모델을 검색·평가할 수 있는 감각"</strong>을 키우는 것이다.
+        앞으로 어떤 AI 프로젝트든 첫 단계는 항상 "HF에 비슷한 모델이 이미 있는가?" 검색이다.</p>
+    </div>
+  </section>
+  <!-- SECTION 7 -->
+  <section class="class-section s2">
+    <div class="section-label">SECTION 7 · LAB B (20분)</div>
+    <h2 class="section-title">Lab B. 프롬프트 깨뜨리기 — 구조화된 출력의 중요성</h2>
+    <p>"LLM에게 JSON을 달라고 하면 JSON을 준다"는 건 <strong>거짓말</strong>이다.
+       프롬프트를 약하게 짜면 어떻게 박살나는지 직접 보고, 어떻게 강화하는지 배워본다.</p>
+    <h3>🔬 실험 1. 약한 프롬프트로 돌려보기</h3>
+    <p>app.py의 <code>SYSTEM_PROMPT</code>를 <strong>일부러 아래처럼 단순하게</strong> 바꾼다:</p>
+    <pre><span class="kw">SYSTEM_PROMPT</span> = <span class="str">"음식 칼로리를 알려줘."</span></pre>
+    <p>그리고 음식 사진 5장을 차례로 넣어보면서 다음을 관찰한다:</p>
+    <ul>
+      <li>JSON이 아예 안 나오는 경우</li>
+      <li>JSON 앞뒤에 <em>"Sure! Here's the answer:"</em> 같은 잡담이 붙는 경우</li>
+      <li>키 이름이 <code>calories</code>, <code>kcal</code>, <code>calorie_count</code>로 매번 다른 경우</li>
+      <li>한국어로 답할 때와 영어로 답할 때 형식이 다른 경우</li>
+    </ul>
+    <p>→ 이것이 바로 <strong>앱이 죽는 진짜 이유</strong>다. 모델이 "틀린 답"을 줘서가 아니라 "예측 불가능한 형태로" 답하기 때문.</p>
+    <h3>🛡️ 실험 2. 프롬프트 강화 4단계</h3>
+    <p>아래 4가지 기법을 <strong>하나씩 추가하면서</strong> 결과가 얼마나 안정되는지 본다.</p>
+    <table>
+      <tr><th>단계</th><th>기법</th><th>예시 문구</th></tr>
+      <tr><td>1</td><td><strong>역할 부여</strong></td><td>"너는 한국 영양사 AI다."</td></tr>
+      <tr><td>2</td><td><strong>스키마 명시</strong></td><td>JSON 키 이름과 타입을 모두 적기</td></tr>
+      <tr><td>3</td><td><strong>예시 제공 (few-shot)</strong></td><td>"입력: pizza → 출력: {...}"</td></tr>
+      <tr><td>4</td><td><strong>금지사항 명시</strong></td><td>"JSON 외 어떤 텍스트도 출력 금지. 마크다운 코드블록 금지."</td></tr>
+    </table>
+    <h3>💪 챌린지: 본인만의 "방탄 프롬프트" 만들기</h3>
+    <div class="todo-box">
+      <div><span class="num">!</span><strong>미션</strong> — 같은 사진 10장을 연속으로 넣었을 때
+        <strong>10번 모두 같은 형식의 JSON</strong>이 나오게 만들어라.
+        성공하면 위 4단계 외에 본인이 추가한 트릭을 1줄로 적어 옆 사람에게 공유.</div>
+    </div>
+    <div class="why-box">
+      <div class="label">실무에서 더 강력한 방법</div>
+      <p>프롬프트로 강제하는 건 임시 방편이다. 실서비스에서는
+        <strong>JSON Schema mode</strong>(OpenAI), <strong>Tool calling</strong>,
+        <strong>Pydantic + Instructor</strong> 라이브러리를 써서
+        모델이 <em>구조 자체를 어길 수 없게</em> 만든다. 이건 다음 학기의 주제.</p>
+    </div>
+  </section>
+  <!-- SECTION 8 -->
+  <section class="class-section s3">
+    <div class="section-label">SECTION 8 · LAB C (20분)</div>
+    <h2 class="section-title">Lab C. 모델 바꿔치기 챌린지</h2>
+    <p>"<code>nateraw/food</code>가 정말 최선인가?"
+       — 같은 인터페이스(Inference API)를 쓰면 모델은 한 줄만 바꿔도 교체된다.
+       이 유연함이 HF의 가장 큰 강점이다.</p>
+    <h3>🎯 챌린지 규칙</h3>
+    <ol class="step-list">
+      <li><code>model_config.py</code>의 <code>VISION_MODEL</code> 한 줄만 바꿔서
+          다른 음식 이미지 분류 모델로 교체</li>
+      <li>같은 음식 사진 5장을 두 모델에 모두 돌려서 결과를 비교표로 정리</li>
+      <li>"어느 모델이 더 좋았는가" + 그 이유를 1줄로 작성</li>
+    </ol>
+    <h3>🔄 후보 모델 (HF에서 "food classification" 검색 결과)</h3>
+    <table>
+      <tr><th>모델</th><th>특징</th><th>한 줄 평</th></tr>
+      <tr>
+        <td><code>nateraw/food</code></td>
+        <td>ViT, Food-101 (101종)</td>
+        <td>이번 주차 기본값</td>
+      </tr>
+      <tr>
+        <td><code>Kaludi/food-category-classification-v2.0</code></td>
+        <td>대분류(Bread, Dessert 등 11종)</td>
+        <td>세밀하지 않지만 빠름</td>
+      </tr>
+      <tr>
+        <td><code>prithivMLmods/Food-101-93M</code></td>
+        <td>SigLIP 기반, 더 큰 모델</td>
+        <td>정확도↑ but cold start↑</td>
+      </tr>
+      <tr>
+        <td>본인이 검색한 모델</td>
+        <td>—</td>
+        <td>가산점 ⭐</td>
+      </tr>
+    </table>
+    <h3>📊 비교 표 양식</h3>
+    <table>
+      <tr><th>사진</th><th>모델 A top-1</th><th>모델 B top-1</th><th>실제 정답</th><th>승자</th></tr>
+      <tr><td>사진 1</td><td>?</td><td>?</td><td>?</td><td>?</td></tr>
+      <tr><td>사진 2</td><td>?</td><td>?</td><td>?</td><td>?</td></tr>
+      <tr><td colspan="5">… 5장까지</td></tr>
+    </table>
+    <h3>🤔 발표 질문</h3>
+    <ul>
+      <li>한식(김치찌개·비빔밥) 사진은 어느 모델이 더 잘 맞췄는가? <em>왜 그럴까?</em></li>
+      <li>모델을 바꿨더니 LLM이 만들어내는 칼로리 추정값도 달라졌는가?</li>
+      <li>"좋은 모델"의 기준은 정확도뿐인가? (속도·크기·라이선스도 고려)</li>
+    </ul>
+    <div class="why-box">
+      <div class="label">핵심 교훈</div>
+      <p>실제 AI 서비스를 만들 때는 모델 1개로 끝내지 않는다.
+        <strong>여러 후보를 같은 데이터에 돌려보고 비교(=벤치마킹)</strong>한 뒤 고른다.
+        오늘 한 일이 바로 그 미니 버전이다.
+        그리고 HF의 표준 인터페이스 덕분에 비교가 "한 줄 수정"으로 끝난다는 게 핵심.</p>
+    </div>
+  </section>
+  <!-- SECTION 9 -->
+  <section class="class-section s5" id="section-deploy">
+    <div class="section-label">SECTION 9 · DEPLOY</div>
+    <h2 class="section-title">HuggingFace Space 배포 — A to Z</h2>
+    <p>로컬에서 동작을 확인했다면 이제 세상에 공개할 차례다.
+       HF Space는 <strong>"git push 한 번으로 공개 URL"</strong>을 주는 무료 호스팅이다.
+       방법은 3가지가 있는데 첫 배포는 <strong>웹 드래그</strong>가 가장 쉽다.</p>
+    <div class="why-box">
+      <div class="label">준비물 체크</div>
+      <p>✓ HF 계정 &nbsp; ✓ Read 토큰(<code>hf_xxxx...</code>) &nbsp;
+         ✓ 로컬에서 돌아가는 완성된 <code>app.py</code> &nbsp;
+         ✓ 배포할 파일 4개: <code>app.py</code>, <code>model_config.py</code>, <code>requirements.txt</code>, <code>README.md</code></p>
+    </div>
+    <h3>🏗️ Step 1. Space 생성하기</h3>
+    <p><a href="https://huggingface.co/new-space">huggingface.co/new-space</a> 접속 → 아래 폼을 위에서 아래로 채운다. ①~⑥ 번호가 이미지와 표에 매칭된다.</p>
+    <img src="images/06_new_space.png" alt="Create a new Space 폼" style="width:100%;max-width:720px;border:1px solid #e5e7eb;border-radius:8px;margin:0.6rem 0;">
+    <table>
+      <tr><th>번호</th><th>항목</th><th>값</th></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#ef4444;color:white;text-align:center;font-weight:bold;">1</span></td><td><strong>Owner / Space name</strong></td><td>Owner는 본인 유저명 자동 선택 / Space name에 <code>calorie-counter</code> 입력</td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#f97316;color:white;text-align:center;font-weight:bold;">2</span></td><td><strong>License</strong></td><td><code>apache-2.0</code> 선택</td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#0ea5e9;color:white;text-align:center;font-weight:bold;">3</span></td><td><strong>Select the Space SDK</strong></td><td><strong>Gradio</strong> ⚠️ (Docker/Static 아님) → 템플릿은 <em>Blank</em></td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#10b981;color:white;text-align:center;font-weight:bold;">4</span></td><td><strong>Space hardware</strong></td><td><code>CPU Basic · Free</code> (기본값)</td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#8b5cf6;color:white;text-align:center;font-weight:bold;">5</span></td><td><strong>Visibility</strong></td><td><code>Public</code> 선택 (남에게 URL 공유하려면 필수)</td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#ec4899;color:white;text-align:center;font-weight:bold;">6</span></td><td><strong>Create Space</strong></td><td>맨 아래 버튼 클릭 → 빈 Space 생성 완료</td></tr>
+    </table>
+    <h3>🔑 Step 2. HF_TOKEN Secret 등록 ⚠️ (이거 빼먹으면 배포 후 에러)</h3>
+    <p>우리 앱은 Inference API를 호출하므로 Space 안에서도 <code>HF_TOKEN</code>이 필요하다.
+       <strong>코드에 적으면 절대 안 되고</strong>, Secret으로 등록해야 한다.</p>
+    <p>방금 만든 Space 페이지 상단 <strong>Settings</strong> 탭 → 아래로 스크롤하면 <strong>Variables and secrets</strong> 섹션이 보인다.</p>
+    <img src="images/07_secrets.png" alt="Settings → Variables and secrets" style="width:100%;max-width:900px;border:1px solid #e5e7eb;border-radius:8px;margin:0.6rem 0;">
+    <table>
+      <tr><th>번호</th><th>위치</th><th>할 일</th></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#ef4444;color:white;text-align:center;font-weight:bold;">1</span></td><td><strong>Variables and secrets 섹션</strong></td><td>Variables(공개 평문)와 Secrets(암호화) 두 칸이 있다. 토큰은 <strong>Secrets</strong>에 넣는다</td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#10b981;color:white;text-align:center;font-weight:bold;">2</span></td><td><strong>New secret</strong> 버튼 (우측 상단)</td><td>클릭 → 팝업에서 Name: <code>HF_TOKEN</code> / Value: 본인 토큰 <code>hf_xxxx...</code> → Save</td></tr>
+    </table>
+    <div class="why-box">
+      <div class="label">Secret vs Variable 차이</div>
+      <p><strong>Secret</strong> — 값이 암호화되어 다시는 조회 불가. 토큰/비밀번호용. 런타임에 환경변수로 주입.<br>
+        <strong>Variable</strong> — 평문. 모델 이름·URL 같은 공개 가능한 설정값용.</p>
+    </div>
+    <h3>📤 Step 3-A. 파일 업로드 — 방법 ① 웹 드래그 (가장 쉬움)</h3>
+    <img src="images/08_files.png" alt="Space Files 탭 — Contribute 드롭다운" style="width:100%;max-width:900px;border:1px solid #e5e7eb;border-radius:8px;margin:0.6rem 0;">
+    <table>
+      <tr><th>번호</th><th>위치</th><th>할 일</th></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#ef4444;color:white;text-align:center;font-weight:bold;">1</span></td><td><strong>Files</strong> 탭 (상단 우측)</td><td>Space 페이지 상단의 App/Files/Community/Settings 중 Files 클릭</td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#10b981;color:white;text-align:center;font-weight:bold;">2</span></td><td><strong>+ Contribute</strong> 드롭다운 (우측 상단)</td><td>클릭 → <em>Upload files</em> 선택 → 탐색기에서 <code>app.py</code>·<code>model_config.py</code>·<code>requirements.txt</code>·<code>README.md</code> 4개 드래그 → Commit 메시지 <code>init</code> → <strong>Commit changes to main</strong></td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#0ea5e9;color:white;text-align:center;font-weight:bold;">3</span></td><td><strong>파일 목록</strong> (본문)</td><td>업로드 성공 시 여기에 파일이 쭉 나열된다. 이후엔 파일 클릭 → 연필 아이콘으로 바로 수정 가능</td></tr>
+    </table>
+    <p>커밋 후 자동으로 <strong>App</strong> 탭으로 이동 → 빌드 로그가 실시간 표시됨 (2~4분).</p>
+    <h3>💻 Step 3-B. 파일 업로드 — 방법 ② git push (표준 방식)</h3>
+    <p>실무에서는 항상 이 방법을 쓴다. Space가 <strong>진짜 git 저장소</strong>라는 걸 느낄 수 있다.</p>
+    <h4>⚠️ 먼저: <strong>Write 권한 토큰</strong> 발급 (git push 전용)</h4>
+    <p>앞서 Step 2에서 만든 <strong>Read 토큰</strong>은 Inference API 호출용이라 <code>git push</code>가 <em>not authorized</em>로 거절된다. push용 <strong>Write 토큰을 따로 하나 더</strong> 만들어야 한다.</p>
+    <p><a href="https://huggingface.co/settings/tokens/new?tokenType=write">huggingface.co/settings/tokens/new?tokenType=write</a> 접속:</p>
+    <img src="images/10_write_token.png" alt="Create new Access Token — Write 타입" style="width:100%;max-width:900px;border:1px solid #e5e7eb;border-radius:8px;margin:0.6rem 0;">
+    <table>
+      <tr><th>번호</th><th>항목</th><th>값</th></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#ef4444;color:white;text-align:center;font-weight:bold;">1</span></td><td><strong>Token type</strong></td><td><strong>Write</strong> 선택 (기본은 Fine-grained). ⚠️ 생성 후 변경 불가 — "This cannot be changed after token creation."</td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#0ea5e9;color:white;text-align:center;font-weight:bold;">2</span></td><td><strong>Token name</strong></td><td>자유롭게 (예: <code>week06-push</code>). 기존 Read 토큰과 구분되는 이름으로</td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#10b981;color:white;text-align:center;font-weight:bold;">3</span></td><td><strong>Create token</strong></td><td>클릭 → <code>hf_xxxx...</code> 복사. <strong>다시는 못 본다</strong></td></tr>
+    </table>
+    <div class="why-box">
+      <div class="label">Read vs Write 토큰 언제 뭐 쓰나</div>
+      <p><strong>Read</strong> — Inference API 호출 / 모델 다운로드 (<code>.env</code>·Space Secrets에 넣는 그 토큰)<br>
+        <strong>Write</strong> — <code>git push</code>, Space 생성·수정, 파일 업로드 등 <em>쓰기 작업</em><br>
+        👉 용도별로 분리해두면 Write 토큰만 유출돼도 API 호출은 안 전해진다. 보안 ↑</p>
+    </div>
+    <div class="why-box">
+      <div class="label">🔐 git push 시 이전 자격증명 캐시가 남아있다면 (macOS)</div>
+      <p>예전에 email/비밀번호로 잘못 입력했다면 키체인에 캐시돼서 계속 실패한다. 한 번만 비워주자:</p>
+      <pre>printf <span class="str">"protocol=https\nhost=huggingface.co\n\n"</span> | git credential-osxkeychain erase</pre>
+      <p>그 다음 <code>git push</code> → Username은 <strong>HF 유저명</strong>(이메일 ❌) / Password는 <strong>방금 만든 Write 토큰</strong>. 성공하면 키체인에 자동 저장돼 이후엔 안 물어본다.</p>
+    </div>
+    <pre><span class="comment"># 📁 시작 상태: week06/ (zip 푼 폴더) 안에 완성 파일이 이미 있다
+# week06/
+# ├── app.py              ← 내가 채워넣은 완성본
+# ├── model_config.py
+# ├── requirements.txt
+# ├── README.md
+# └── images/...
+# 1) week06/ 안에서 Space 저장소를 내려받는다
+#    → calorie-counter/ 라는 폴더가 새로 생긴다
+git clone https://huggingface.co/spaces/&lt;본인유저명&gt;/calorie-counter
+# 이 시점의 폴더 구조:
+# week06/
+# ├── app.py            ← 원본 (아직 여기 있음)
+# ├── ...
+# └── calorie-counter/  ← 방금 clone한 Space 저장소
+# 2) clone한 폴더로 이동
+cd calorie-counter
+# 3) 한 단계 위(../ = week06/)의 파일 4개를 여기로 복사
+cp ../app.py .
+cp ../model_config.py .
+cp ../requirements.txt .
+cp ../README.md .
+# 4) 커밋 & 푸시 — 이 순간 HF가 자동으로 빌드 시작
+git add .
+git commit -m <span class="str">"init: calorie counter with LangChain LCEL"</span>
+git push
+<span class="comment"># Username: 본인 HF 유저명
+# Password: hf_xxxx... (비밀번호 아닌 토큰!)</span></pre>
+    <h3>📄 Step 3-C. README.md의 YAML Frontmatter — 필수</h3>
+    <p>Space는 README.md 맨 위의 <strong>YAML 블록</strong>으로 설정을 읽는다. 이 블록이 없으면 빌드가 실패한다.</p>
+    <pre><span class="str">---
+title: HuggingFace Calorie Counter
+emoji: 🍱
+colorFrom: pink
+colorTo: yellow
+sdk: gradio
+sdk_version: 5.9.1
+python_version: "3.11"
+app_file: app.py
+pinned: false
+license: apache-2.0
+---</span>
+# 6주차: HuggingFace Space 칼로리 카운터
+...</pre>
+    <table>
+      <tr><th>키</th><th>의미</th></tr>
+      <tr><td><code>sdk</code></td><td>Space 런타임 — 반드시 <code>gradio</code></td></tr>
+      <tr><td><code>sdk_version</code></td><td>Gradio 버전 — 로컬과 맞추면 안전</td></tr>
+      <tr><td><code>app_file</code></td><td>Space가 실행할 파이썬 파일 — <code>app.py</code></td></tr>
+      <tr><td><code>emoji</code>, <code>colorFrom/To</code></td><td>Space 카드 꾸미기 (선택)</td></tr>
+      <tr><td><code>title</code></td><td>Space 페이지 제목</td></tr>
+    </table>
+    <h3>🔍 Step 4. 빌드 로그 읽는 법</h3>
+    <p>Space <strong>App</strong> 탭에서 상태 뱃지와 로그 패널을 함께 본다. 아래는 실제로 에러가 난 예시 화면.</p>
+    <img src="images/09_app_logs.png" alt="Space App 탭 — 상태 뱃지 + 로그 패널" style="width:100%;max-width:900px;border:1px solid #e5e7eb;border-radius:8px;margin:0.6rem 0;">
+    <table>
+      <tr><th>번호</th><th>영역</th><th>의미 / 보는 법</th></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#ef4444;color:white;text-align:center;font-weight:bold;">1</span></td><td><strong>상태 뱃지</strong> (상단, 제목 옆)</td><td><code>Building</code>(빌드 중) → <code>Running</code>(초록, 성공) → <code>Runtime error</code>(빨강, 런타임 죽음) → <code>Sleeping 💤</code>(48h 무접속). 여기부터 먼저 확인</td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#f97316;color:white;text-align:center;font-weight:bold;">2</span></td><td><strong>App / Files / Community / Settings</strong> 탭</td><td>App 탭이 지금 활성화됨 (밑줄). 다른 탭으로 언제든 이동 가능</td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#0ea5e9;color:white;text-align:center;font-weight:bold;">3</span></td><td><strong>로그 탭 바</strong> (Logs / Build / Container)</td><td><em>Build</em>: <code>pip install</code> 단계(의존성 누락 시 여기서 실패) / <em>Container</em>: 빌드 성공 후 런타임 로그(Python traceback·print 출력) / <em>Logs Endpoint</em>: 원본 로그 URL</td></tr>
+      <tr><td><span style="display:inline-block;width:24px;height:24px;border-radius:50%;background:#10b981;color:white;text-align:center;font-weight:bold;">4</span></td><td><strong>로그 본문</strong></td><td>Running일 땐 여기에 Gradio UI가 임베드되고, 에러 시 traceback이 나온다. 위 예시는 <code>ModuleNotFoundError: No module named 'audioop'</code> — 파이썬 3.13에서 pydub 호환 문제</td></tr>
+    </table>
+    <h3>🎉 Step 5. 동작 확인 & 배포된 URL</h3>
+    <p>Running이 되면 이런 화면이 뜬다. 초록 <code>● Running</code> 뱃지가 보이면 성공.</p>
+    <img src="images/11_running.png" alt="배포 성공: Running 상태의 Gradio UI" style="width:100%;max-width:900px;border:1px solid #e5e7eb;border-radius:8px;margin:0.6rem 0;">
+    <div class="todo-box">
+      <div><span class="num">✓</span>상단 상태 뱃지가 <strong>Running</strong> (초록)으로 바뀜</div>
+      <div><span class="num">✓</span>Gradio UI가 Space 페이지 안에 임베드되어 표시됨</div>
+      <div><span class="num">✓</span>음식 사진 1장 드래그 → 30~60초 후 분류 결과 + JSON 표시</div>
+    </div>
+    <h4>🌐 Space가 배포되면 URL이 2개 생긴다</h4>
+    <table>
+      <tr><th>종류</th><th>형식</th><th>언제 쓰나</th></tr>
+      <tr>
+        <td><strong>① 페이지 URL</strong><br>(HF 허브 페이지)</td>
+        <td><code>https://huggingface.co/spaces/&lt;유저&gt;/&lt;스페이스명&gt;</code><br>예: <code>https://huggingface.co/spaces/jay-kim412/estimate_calories</code></td>
+        <td>Space 프로필(좋아요·Community·Files 탭) + 앱 임베드가 함께 보임. 친구한테 공유·이력서에 붙일 땐 이걸 씀</td>
+      </tr>
+      <tr>
+        <td><strong>② 직접 앱 URL</strong><br>(Gradio 풀스크린)</td>
+        <td><code>https://&lt;유저&gt;-&lt;스페이스명&gt;.hf.space</code><br>예: <code>https://jay-kim412-estimate-calories.hf.space</code></td>
+        <td>HF UI 없이 앱만 전체화면. iframe 임베드·모바일 공유에 편함. 유저명·스페이스명의 <code>_</code>는 자동으로 <code>-</code>로 치환된다</td>
+      </tr>
+    </table>
+    <div class="why-box">
+      <div class="label">💡 Custom domain은?</div>
+      <p>Settings 페이지에 <strong>Custom domain</strong> 항목이 보이는데, 본인 소유 도메인(<code>calorie.mydomain.com</code> 등)을 Space에 연결하는 기능이다. <strong>PRO 계정 유료</strong> 전용이라 수업에서는 무시. 무료 계정은 위 2개 URL로 충분하다.</p>
+    </div>
+    <h3>🐛 Step 6. 자주 걸리는 함정과 해결법</h3>
+    <table>
+      <tr><th>증상</th><th>원인</th><th>해결</th></tr>
+      <tr>
+        <td>Build failed: <code>ModuleNotFoundError</code></td>
+        <td>requirements.txt에 누락</td>
+        <td>필요한 패키지 추가 후 재푸시</td>
+      </tr>
+      <tr>
+        <td>Runtime: <code>HF_TOKEN 환경변수가 비어있습니다</code></td>
+        <td>Secrets 미등록</td>
+        <td>Settings → Variables and secrets 재확인</td>
+      </tr>
+      <tr>
+        <td>첫 호출에서 503 Service Unavailable</td>
+        <td>LLM cold start (무료 티어)</td>
+        <td>30초 대기 후 다시 시도. 반복되면 다른 LLM으로 교체</td>
+      </tr>
+      <tr>
+        <td><code>meta-llama/Meta-Llama-3-8B-Instruct</code> 접근 거부</td>
+        <td>Meta 라이선스 미동의</td>
+        <td><a href="https://huggingface.co/meta-llama/Meta-Llama-3-8B-Instruct">모델 페이지</a>에서 동의 체크 후 승인 대기</td>
+      </tr>
+      <tr>
+        <td>Space가 <code>Sleeping 💤</code> 상태</td>
+        <td>48시간 트래픽 없으면 자동 휴면</td>
+        <td>페이지 접속만 해도 자동으로 깨어남 (30초)</td>
+      </tr>
+      <tr>
+        <td>git push 시 <em>Authentication failed</em></td>
+        <td>비밀번호로 시도</td>
+        <td>Password 자리에 <strong>HF 토큰</strong>(<code>hf_...</code>) 입력</td>
+      </tr>
+      <tr>
+        <td>빌드는 성공했는데 UI가 안 뜸</td>
+        <td><code>app_file</code> 지정 오류</td>
+        <td>README.md frontmatter에 <code>app_file: app.py</code> 확인</td>
+      </tr>
+    </table>
+    <h3>🔄 Step 7. 코드 수정 후 재배포</h3>
+    <p>Space는 git이므로 <strong>그냥 다시 push하면 자동 재빌드</strong>된다.</p>
+    <pre><span class="comment"># 웹 업로드 방식이면</span>
+<span class="comment"># → Files 탭에서 해당 파일 클릭 → 연필 아이콘(Edit) → 수정 후 Commit</span>
+<span class="comment"># git 방식이면</span>
+git add app.py
+git commit -m <span class="str">"tweak: 프롬프트 강화"</span>
+git push
+<span class="comment"># → Space가 1~2분 후 자동 재시작</span></pre>
+    <h3>💰 비용 안내 (무료 티어 제한)</h3>
+    <ul>
+      <li><strong>Space 호스팅</strong>: 무료 (CPU basic 무제한)</li>
+      <li><strong>Inference API 호출</strong>: 무료 계정은 시간당 제한이 있음 (정확한 수치는 시즌별 변동)</li>
+      <li>48시간 미사용 → 자동 Sleep → 접속 시 자동 기상 (cold start 30~60초)</li>
+      <li>항상 켜두려면 <strong>ZeroGPU</strong>(PRO 계정) 또는 <strong>Inference Endpoints</strong> 유료 전환</li>
+    </ul>
+    <div class="why-box">
+      <div class="label">🏆 배포 완료 후</div>
+      <p>공개 URL을 GitHub 프로필·이력서·링크드인에 붙이자.
+        "HuggingFace에 직접 배포한 AI 앱"은
+        채용 담당자와 교수에게 <strong>말보다 훨씬 강한 증명</strong>이 된다.
+        이번 한 번의 배포 경험이 앞으로 만들 모든 AI 데모의 템플릿이 된다.</p>
+    </div>
+  </section>
+  <!-- MISSION -->
+  <div class="mission">
+    <h2>🎯 오늘 수업 미션</h2>
+    <ul>
+      <li>app.py의 TODO 3곳을 모두 채운다</li>
+      <li>로컬에서 음식 사진 1장 이상으로 동작 확인</li>
+      <li>HuggingFace Space에 배포해 공개 URL 받기</li>
+      <li>title/emoji/SYSTEM_PROMPT 중 하나 이상 본인만의 방식으로 커스터마이즈</li>
+      <li>결과물: <strong>Space URL + 결과 스크린샷 1장 + 2~3줄 회고</strong></li>
+    </ul>
+  </div>
+  <footer>
+    2026 AI웹융합 · Week 06 · HuggingFace × Spaces · 칼로리 카운터
+  </footer>
+</div>
+</body>
+</html>

README.md CHANGED Viewed

@@ -1,14 +1,87 @@
 ---
-title: Calcal
-emoji: 🚀
 colorFrom: pink
-colorTo: blue
 sdk: gradio
-sdk_version: 6.11.0
 app_file: app.py
 pinned: false
 license: apache-2.0
-short_description: Calorie Calculator
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: HuggingFace Calorie Counter
+emoji: 🍱
 colorFrom: pink
+colorTo: yellow
 sdk: gradio
+sdk_version: 5.9.1
+python_version: "3.11"
 app_file: app.py
 pinned: false
 license: apache-2.0
 ---
+# 6주차: HuggingFace Space 칼로리 카운터
+음식 사진을 업로드하면 HuggingFace Inference API로 음식을 인식하고,
+LLM이 1인분 기준 칼로리/탄단지를 추정하는 Gradio 앱이다.
+완성된 앱은 그대로 **HuggingFace Space** 에 올려 공개 URL을 받을 수 있다.
+> 이 자료의 기술 정보는 2026-04 기준입니다.
+## 파일 구조
+```
+week06/
+├── app.py              # Gradio 앱 본체 (TODO 4곳을 채워 완성)
+├── model_config.py     # HF 모델 이름 상수 + InferenceClient 팩토리
+├── requirements.txt    # Space가 설치할 의존성
+├── .env.example        # HF_TOKEN 템플릿
+└── README.md           # 이 파일 (앞의 YAML이 Space 설정)
+```
+## 실행 방법 (로컬)
+```bash
+# 1) 토큰 발급: https://huggingface.co/settings/tokens (Read 권한)
+cp .env.example .env
+# .env 파일을 열어 HF_TOKEN=hf_... 로 수정
+# 2) 의존성 설치
+uv pip install -r requirements.txt
+# 3) 실행
+uv run python app.py
+# 브라우저: http://127.0.0.1:7860
+```
+## TODO (app.py 안)
+1. **`SYSTEM_PROMPT`** — 영양사 역할 + JSON 스키마 강제 (ChatPromptTemplate 안에 들어가므로 중괄호는 `{{ }}`로 이스케이프)
+2. **`_chain_lazy()` 안 LCEL 체인 조립** (4단계)
+   - 2-1. `HuggingFaceEndpoint` 생성 (`repo_id=LLM_MODEL`, `task="text-generation"`, 토큰)
+   - 2-2. `ChatHuggingFace(llm=endpoint)` 로 감싸기
+   - 2-3. `ChatPromptTemplate.from_messages([("system", SYSTEM_PROMPT), ("human", "...{labels_json}")])`
+   - 2-4. `_chain = prompt | llm | JsonOutputParser()` 파이프 연결
+3. **`classify_food()`** — `client.image_classification(tmp_path, model=VISION_MODEL)` 호출
+4. **`estimate_calories()`** — `chain.invoke({"labels_json": labels_json})` 호출
+네 곳을 채우면 앱이 동작한다.
+## HuggingFace Space 배포 방법
+1. https://huggingface.co/new-space 에서 **Gradio** SDK로 Space 생성
+2. Space의 **Settings > Variables and secrets** 에 `HF_TOKEN` 등록
+3. 파일 업로드 (웹 드래그 or `git push`)
+   ```bash
+   git clone https://huggingface.co/spaces/<본인>/<space-이름>
+   cd <space-이름>
+   cp ../week06/{app.py,model_config.py,requirements.txt,README.md} .
+   git add .
+   git commit -m "init"
+   git push
+   ```
+4. 몇 분 후 `https://huggingface.co/spaces/<본인>/<space-이름>` 접속하여 동작 확인
+## 과제
+- [ ] Space URL 제출
+- [ ] title/emoji/프롬프트 중 하나 이상 커스터마이즈
+- [ ] 결과 스크린샷 1장 + 2~3줄 설명
+## 사용 모델
+| 역할 | 모델 |
+|------|------|
+| 이미지 분류 | `nateraw/food` |
+| 칼로리 추정 LLM | `meta-llama/Meta-Llama-3-8B-Instruct` |

__pycache__/model_config.cpython-313.pyc ADDED Viewed

Binary file (1.49 kB). View file

app.py ADDED Viewed

	@@ -0,0 +1,215 @@

+"""
+6주차 실습: HuggingFace Space 칼로리 카운터 (LangChain LCEL · 학생 버전)
+=====================================================================
+음식 사진을 업로드하면
+  1) HF Inference API의 이미지 분류 모델로 음식을 인식하고
+  2) 그 결과를 LangChain ChatHuggingFace LLM에 넘겨 칼로리/영양소를 추정한 뒤
+  3) Gradio UI로 보여준다.
+핵심 변경: estimate_calories는 LCEL 체인(prompt | llm | parser)으로 구성한다.
+이 파일을 그대로 HuggingFace Space(Gradio SDK)에 올리면 배포된다.
+TODO 로 표시된 부분을 채워 완성한 뒤,
+  1) 로컬에서 실행해보고
+  2) HuggingFace Space에 배포한다.
+로컬 실행:
+    uv run python app.py
+"""
+from __future__ import annotations
+import json
+import os
+import tempfile
+from typing import Any
+import gradio as gr
+from gradio_client import utils as _gc_utils  # noqa: E402
+# --- workaround: gradio_client의 JSON Schema walker가 bool 스키마를 만나면
+# 터지는 버그(#10178) 우회. Label/JSON 컴포넌트가 생성하는
+# additionalProperties: true 스키마에서 발생한다.
+_orig_get_type = _gc_utils.get_type
+def _safe_get_type(schema):
+    if isinstance(schema, bool):
+        return "Any"
+    return _orig_get_type(schema)
+_gc_utils.get_type = _safe_get_type
+_orig_j2p = _gc_utils._json_schema_to_python_type
+def _safe_j2p(schema, defs=None):
+    if isinstance(schema, bool):
+        return "Any"
+    return _orig_j2p(schema, defs)
+_gc_utils._json_schema_to_python_type = _safe_j2p
+from dotenv import load_dotenv
+from huggingface_hub import InferenceClient
+from langchain_core.output_parsers import JsonOutputParser
+from langchain_core.prompts import ChatPromptTemplate
+from langchain_huggingface import ChatHuggingFace, HuggingFaceEndpoint
+from PIL import Image
+from model_config import LLM_MODEL, VISION_MODEL, get_token
+load_dotenv()
+TOP_K = 3
+# ---------------------------------------------------------------------------
+# TODO 1. 시스템 프롬프트
+# ---------------------------------------------------------------------------
+# LLM 이 '영양사 AI' 역할을 하고, 1인분 기준 칼로리/탄단지를 JSON 으로 출력하도록
+# 시스템 프롬프트를 작성하라.
+# - 반드시 아래 JSON 스키마만 출력하라고 강제할 것
+#   {"food": str, "confidence": float, "calories_kcal": int,
+#    "carbs_g": int, "protein_g": int, "fat_g": int, "note": str}
+# - ChatPromptTemplate 에 들어가므로 JSON 예시의 중괄호는 {{ }} 로 이스케이프할 것
+SYSTEM_PROMPT = """ 너는 한국 영양사 AI다.
+사용자가 음식 분류 결과(top-k labels)를 주면,
+가장 가능성 높은 음식 1개의 1인분 기준 영양정보를 추정해
+반드시 다음 JSON 스키마만 출력하라. 다른 텍스트/마크다운 금지.
+{{"food": "음식명", "confidence": 0.0~1.0,
+  "calories_kcal": 정수, "carbs_g": 정수,
+  "protein_g": 정수, "fat_g": 정수,
+  "note": "추정 근거 한 줄"}}"
+"""
+# -----------------------------------------------------------------------------
+# 클라이언트 / 체인 lazy init
+# -----------------------------------------------------------------------------
+_vision_client: InferenceClient | None = None
+_chain = None
+def _vision_lazy() -> InferenceClient:
+    global _vision_client
+    if _vision_client is None:
+        _vision_client = InferenceClient(token=get_token())
+    return _vision_client
+def _chain_lazy():
+    """LCEL 체인: prompt | ChatHuggingFace | JsonOutputParser"""
+    global _chain
+    if _chain is None:
+        # 3-1. HF Inference Endpoint 생성
+        endpoint = HuggingFaceEndpoint(
+            repo_id=LLM_MODEL,
+            task="text-generation",
+            max_new_tokens=300,
+            temperature=0.2,
+            huggingfacehub_api_token=get_token(),
+        )
+        # 3-2. 채팅 인터페이스로 감싸기
+        llm = ChatHuggingFace(llm=endpoint)
+        # 3-3. 프롬프트 템플릿
+        prompt = ChatPromptTemplate.from_messages([
+            ("system", SYSTEM_PROMPT),
+            ("human", "다음은 이미지 분류기의 top-k 결과다:\n{labels_json}"),
+        ])
+        # 3-4. LCEL 파이프라인 — 이 한 줄이 핵심!
+        _chain = prompt | llm | JsonOutputParser()
+    return _chain
+# -----------------------------------------------------------------------------
+# Step 1: 이미지 분류 (LangChain 추상화 없음 — InferenceClient 직접 사용)
+# -----------------------------------------------------------------------------
+def classify_food(image: Image.Image) -> list[dict[str, Any]]:
+    """HF 이미지 분류 모델에 PIL 이미지를 넘겨 top-k 결과를 받는다."""
+    client = _vision_lazy()
+    # PIL 이미지를 JPEG 임시 파일로 저장 (hf-inference 라우터가 Content-Type 을 요구).
+    with tempfile.NamedTemporaryFile(suffix=".jpg", delete=False) as tmp:
+        image.convert("RGB").save(tmp, format="JPEG")
+        tmp_path = tmp.name
+    try:
+        raw = client.image_classification(tmp_path, model=VISION_MODEL)
+    finally:
+        os.unlink(tmp_path)
+    results: list[dict[str, Any]] = []
+    for item in raw[:TOP_K]:
+        if isinstance(item, dict):
+            results.append({"label": item["label"], "score": float(item["score"])})
+        else:
+            results.append({"label": item.label, "score": float(item.score)})
+    return results
+# -----------------------------------------------------------------------------
+# Step 2: 칼로리/영양소 추정 (LCEL 체인)
+# -----------------------------------------------------------------------------
+def estimate_calories(labels: list[dict[str, Any]]) -> dict[str, Any]:
+    chain = _chain_lazy()
+    labels_json = json.dumps(labels, ensure_ascii=False)
+    try:
+        chain = _chain_lazy()
+        labels_json = json.dumps(labels, ensure_ascii=False)
+        return chain.invoke({"labels_json": labels_json})
+    except Exception as e:
+        return {
+            "food": labels[0]["label"] if labels else "unknown",
+            "confidence": labels[0]["score"] if labels else 0.0,
+            "calories_kcal": 0,
+            "carbs_g": 0,
+            "protein_g": 0,
+            "fat_g": 0,
+            "note": f"체인 실행 실패: {type(e).__name__}: {str(e)[:120]}",
+        }
+# -----------------------------------------------------------------------------
+# Step 3: Gradio 콜백
+# -----------------------------------------------------------------------------
+def analyze(image):
+    if image is None:
+        return {}, {"error": "이미지를 먼저 업로드해 주세요."}
+    labels = classify_food(image)
+    label_view = {item["label"]: item["score"] for item in labels}
+    nutrition = estimate_calories(labels)
+    return label_view, nutrition
+# -----------------------------------------------------------------------------
+# Step 4: UI
+# -----------------------------------------------------------------------------
+def build_ui() -> gr.Interface:
+    return gr.Interface(
+        fn=analyze,
+        inputs=gr.Image(type="pil", label="음식 사진 업로드"),
+        outputs=[
+            gr.Label(num_top_classes=TOP_K, label="음식 분류 결과"),
+            gr.JSON(label="칼로리 & 영양소 추정"),
+        ],
+        title="🍱 HuggingFace Calorie Counter (LangChain LCEL)",
+        description=(
+            "음식 사진을 업로드하면 HF Inference API로 음식을 인식하고, "
+            "LangChain LCEL 체인이 1인분 기준 칼로리/영양소를 추정합니다. "
+            "결과는 참고용입니다."
+        ),
+        flagging_mode="never",
+    )
+# 모듈 레벨 demo (Space/HF 런타임 호환)
+demo = build_ui()
+if __name__ == "__main__":
+    # HF Space에서는 SPACE_ID 환경변수가 설정돼 있어 0.0.0.0 바인딩이 필요하다.
+    # 로컬에서는 127.0.0.1.
+    is_space = bool(os.getenv("SPACE_ID"))
+    demo.launch(
+        server_name="0.0.0.0" if is_space else "127.0.0.1",
+        server_port=int(os.getenv("PORT", 7860)),
+        show_api=False,
+        ssr_mode=False,
+    )

calcal/.gitattributes ADDED Viewed

	@@ -0,0 +1,35 @@

+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

calcal/README.md ADDED Viewed

	@@ -0,0 +1,14 @@

+---
+title: Calcal
+emoji: 🚀
+colorFrom: pink
+colorTo: blue
+sdk: gradio
+sdk_version: 6.11.0
+app_file: app.py
+pinned: false
+license: apache-2.0
+short_description: Calorie Calculator
+---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

images/01_main.png ADDED Viewed

Git LFS Details

SHA256: b5565fde54ad1d0e546d2530f3c0d709812f0c48e05c250d409e484688f7d2b5
Pointer size: 131 Bytes
Size of remote file: 389 kB

images/02_models.png ADDED Viewed

Git LFS Details

SHA256: 113bb91f4a923869ac109c483938a641b29a41c28f90e7fff44b8654461b77c7
Pointer size: 131 Bytes
Size of remote file: 359 kB

images/03_model_card.png ADDED Viewed

Git LFS Details

SHA256: ca0c611fa9a2345e91458056d91b533a3ad1ba602b384855f6633bbae2d1539f
Pointer size: 131 Bytes
Size of remote file: 165 kB

images/04_spaces.png ADDED Viewed

Git LFS Details

SHA256: 866bfc9ce13e0bd59f65f933dd4d2d3509ba82d1b2becac7bbfb5953f72dabb6
Pointer size: 131 Bytes
Size of remote file: 494 kB

images/05_tokens.png ADDED Viewed

Git LFS Details

SHA256: 4c6d98759fd3c950ab224c34920470454e8e6ebbdec39640e3438b4d0b852c6b
Pointer size: 131 Bytes
Size of remote file: 286 kB

images/06_new_space.png ADDED Viewed

Git LFS Details

SHA256: 580f5130fdad527c2c22e7ff916c0aa4c5f64e37918c6d45b9bbf7ee62cc114b
Pointer size: 131 Bytes
Size of remote file: 191 kB

images/07_secrets.png ADDED Viewed

images/08_files.png ADDED Viewed

images/09_app_logs.png ADDED Viewed

Git LFS Details

SHA256: 469fbe99928057d8fc4fa5bf32efaaec508e9aed4f23d1f88b28f2fbe4b1a71b
Pointer size: 131 Bytes
Size of remote file: 198 kB

images/10_write_token.png ADDED Viewed

Git LFS Details

SHA256: d92a486e26ba41f1a9dc06b86a734905819811900b9d7c7d32d0cd27fe6f8f03
Pointer size: 131 Bytes
Size of remote file: 187 kB

images/11_running.png ADDED Viewed

model_config.py ADDED Viewed

	@@ -0,0 +1,35 @@

+"""
+6주차 모델 설정 — HuggingFace Inference API
+===========================================
+토큰은 .env 의 HF_TOKEN 또는 HUGGINGFACEHUB_API_TOKEN 에서 읽는다.
+HF Space에 배포할 때는 Settings > Secrets 에 HF_TOKEN 을 등록한다.
+"""
+from __future__ import annotations
+import os
+from huggingface_hub import InferenceClient
+# 음식 이미지 분류 (ViT, food-101 파인튜닝)
+VISION_MODEL = "nateraw/food"
+# 칼로리/영양소 추정용 텍스트 LLM
+LLM_MODEL = "meta-llama/Meta-Llama-3-8B-Instruct"
+def get_token() -> str:
+    token = os.getenv("HF_TOKEN") or os.getenv("HUGGINGFACEHUB_API_TOKEN")
+    if not token:
+        raise SystemExit(
+            "HF_TOKEN(또는 HUGGINGFACEHUB_API_TOKEN) 환경변수가 비어 있습니다.\n"
+            "  1) https://huggingface.co/settings/tokens 에서 Read 토큰 발급\n"
+            "  2) .env 에 HF_TOKEN=hf_xxx 추가 (로컬)\n"
+            "  3) HF Space: Settings > Secrets 에 HF_TOKEN 등록"
+        )
+    return token
+def get_client() -> InferenceClient:
+    """이미지 분류용 클라이언트."""
+    return InferenceClient(token=get_token())

requirements.txt ADDED Viewed

	@@ -0,0 +1,7 @@

+gradio>=5.0,<6
+huggingface_hub>=0.24,<1.0
+langchain>=0.3
+langchain-core>=0.3
+langchain-huggingface>=0.1
+pillow>=10.0
+python-dotenv>=1.0