Update app.py

app.py

@@ -640,184 +640,268 @@ theme = gr.themes.Soft()
 
 def load_json_data():
     return [
-        # 초급 레벨 (5건) - 기본 문법과 UI 익히기
         {
-            "name": "[기본] 구구단 계산기",
+            "name": "[기본/컴포넌트] 구구단 계산기",
             "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),             
             "prompt": "구구단을 계산하고 출력하는 간단한 계산기를 만드세요. 사용자가 숫자를 입력하면 해당 단의 구구단이 출력되고, '전체 구구단 보기' 버튼을 누르면 2~9단까지 모두 표시됩니다."
         },
         {
-            "name": "[기본] BMI 계산기",
+            "name": "[기본/컴포넌트] 복합 선택 및 문장 생성 처리",
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),
+            "prompt": "한국어로 동작하는 문장 생성기를 만들어주세요. 슬라이더(수량 2-20), 드롭다운(동물 종류), 체크박스(국가 선택), 라디오버튼(장소), 다중선택 드롭다운(활동), 체크박스(아침/저녁)를 통해 입력받은 값들로 '[국가]에서 온 [수량]마리의 [동물]이 [장소]에서 [활동] 했습니다. [시간]까지.' 형식의 문장을 만들어주세요."
+        },
+        {
+            "name": "[기본/컴포넌트] 데이터 레코드 처리",
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),
+            "prompt": "데이터프레임에서 성별 필터링하는 프로그램을 만들어주세요. 사용자가 입력할 수 있는 데이터프레임(이름, 나이, 성별 컬럼)과 드롭다운(성별 선택)을 통해 선택된 성별에 해당하는 레코드만 필터링하여 보여주는 인터페이스를 만들어주세요."
+        },
+
+          {
+            "name": "[기본/컴포넌트] 오디오 생성 및 처리",
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),
+            "prompt": "음악 음 생성기를 만들어주세요. 드롭다운(음계 C~B), 슬라이더(옥타브 4-6), 텍스트박스(재생시간)를 입력받아 선택한 음을 생성하는 인터페이스를 만들어주세요. numpy를 사용하여 사인파를 생성하고 샘플링 레이트는 48000Hz로 설정해주세요."
+        },
+        {
+            "name": "[기본/컴포넌트] 행렬 전치 처리",
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),
+            "prompt": "행렬 전치(transpose) 프로그램을 만들어주세요. 숫자형 데이터를 입력받을 수 있는 데이터프레임(5x3)을 제공하고, numpy를 사용하여 입력된 행렬을 전치하는 인터페이스를 만들어주세요. 예제로 영행렬, 단위행렬, 그리고 3개의 랜덤 행렬을 포함해주세요."
+        },
+        {
+            "name": "[기본/컴포넌트] 수학 계산 처리",
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),
+            "prompt": "세금 계산기를 만들어주세요. 숫자형 입력(연간 소득), 라디오버튼(결혼상태: 미혼/기혼/이혼), 데이터프레임(자산 항목과 비용)을 입력받아 세금을 계산합니다. 소득구간별 세율(10만원 이하 0%, 25만원 이하 8% 등)을 적용하고, 기혼자는 25% 감면, 이혼자는 20% 감면됩니다. 구매한 자산은 소득공제되며, 두 개의 예시 데이터를 포함해주세요."
+        },
+
+          {
+            "name": "[기본/컴포넌트] 차트 생성 처리",
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),
+            "prompt": "기업 성장 예측 그래프를 만들어주세요. 라디오버튼(목표연도 2025-2040), 체크박스그룹(기업선택), 슬라이더(노이즈 1-100), 체크박스(범례표시), 드롭다운(그래프스타일)을 입력받아 matplotlib으로 각 기업의 성장곡선을 시각화합니다. 2020년부터 시작하여 기업별로 2차 함수 형태의 성장곡선을 그리며, 선택된 노이즈를 적용해주세요."
+        },
+        {
+            "name": "[기본/컴포넌트] 스트리밍 챗봇 구성 처리",
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),
+            "prompt": "한글 타이핑 효과가 있는 채팅 인터페이스를 만들어주세요. 사용자의 입력 메시지를 한 글자씩 0.05초 간격으로 출력하며, 각 메시지 앞에 '당신의 입력어:'를 붙여서 보여주는 챗봇을 만들어주세요."
+        },
+        {
+            "name": "[기본/컴포넌트] 멀티 탭 구성 처리",
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),
+            "prompt": "텍스트와 이미지를 좌우반전하는 프로그램을 만들어주세요. 첫 번째 탭에서는 텍스트 입력창과 반전 버튼으로 텍스트를 반전하고, 두 번째 탭에서는 이미지 업로드와 반전 버튼으로 이미지��� 좌우반전합니다. 아코디언 메뉴에는 0부터 1까지 조절 가능한 슬라이더를 포함해주세요."
+        },
+
+          {
+            "name": "[기본/컴포넌트] 텍스트 고급 분석(감정) 처리",
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),
+            "prompt": "텍스트 감정 분석기를 만들어주세요. Hugging Face의 transformers.js를 사용하여 사용자가 입력한 텍스트의 감정을 분석하고, 결과를 JSON 형태로 출력하는 간단한 인터페이스를 만들어주세요."
+        },        
+        {
+            "name": "[기본/컴포넌트] 감정 분석 시스템",
+            "image_url": "data:image/png;base64," + get_image_base64('sentiment.png'),
+            "prompt": "텍스트 감정 분석기를 만들어주세요. Hugging Face의 transformers.js의 'sentiment-analysis' 파이프라인을 사용하여 텍스트의 감정을 분석하는 인터페이스를 만들어주세요."
+        },
+        {
+            "name": "[기본/컴포넌트] 문장 채우기 시스템",
+            "image_url": "data:image/png;base64," + get_image_base64('fill-mask.png'),
+            "prompt": "문장 완성기를 만들어주세요. transformers.js의 'fill-mask' 파이프라인을 사용하여 [MASK] 토큰이 포함된 문장을 완성하는 인터페이스를 만들어주세요."
+        },
+        {
+            "name": "[기본/컴포넌트] 텍스트 생성 시스템",
+            "image_url": "data:image/png;base64," + get_image_base64('text-generation.png'),
+            "prompt": "텍스트 생성기를 만들어주세요. transformers.js의 'text-generation' 파이프라인을 사용하여 시작 문구로부터 텍스트를 생성하는 인터페이스를 만들어주세요."
+        },
+        {
+            "name": "[기본/컴포넌트] 제로샷 분류 시스템",
+            "image_url": "data:image/png;base64," + get_image_base64('zero-shot.png'),
+            "prompt": "텍스트 분류기를 만들어주세요. transformers.js의 'zero-shot-classification' 파이프라인을 사용하여 텍스트를 주어진 레이블로 분류하는 인터페이스를 만들어주세요."
+        },
+        {
+            "name": "[응용용] 토큰 분류 시스템",
+            "image_url": "data:image/png;base64," + get_image_base64('token.png'),
+            "prompt": "토큰 분류기를 만들어주세요. transformers.js의 'token-classification' 파이프라인을 사용하여 텍스트에서 개체명을 인식하는 인터페이스를 만들어주세요."
+        },
+        {
+            "name": "[응용] 질문 답변 시스템",
+            "image_url": "data:image/png;base64," + get_image_base64('qa.png'),
+            "prompt": "QA 시스템을 만들어주세요. transformers.js의 'question-answering' 파이프라인을 사용하여 주어진 문맥에서 질문에 답하는 인터페이스를 만들어주세요."
+        },
+        {
+            "name": "[응용] 문장 유사도 시스템",
+            "image_url": "data:image/png;base64," + get_image_base64('similarity.png'),
+            "prompt": "문장 유사도 분석기를 만들어주세요. transformers.js의 'feature-extraction' 파이프라인을 사용하여 두 문장 간의 유사도를 계산하는 인터페이스를 만들어주세요."
+        },
+        {
+            "name": "[응용] 문서 요약 시스템",
+            "image_url": "data:image/png;base64," + get_image_base64('summarization.png'),
+            "prompt": "텍스트 요약기를 만들어주세요. transformers.js의 'summarization' 파이프라인을 사용하여 긴 텍스트를 요약하는 인터페이스를 만들어주세요."
+        },
+        {
+            "name": "[응용] 번역 시스템",
+            "image_url": "data:image/png;base64," + get_image_base64('translation.png'),
+            "prompt": "번역기를 만들어주세요. transformers.js의 'translation' 파이프라인을 사용하여 텍스트를 다른 언어로 번역하는 인터페이스를 만들어주세요."
+        },
+        {
+            "name": "[응용] 텍스트 분류 시스템",
+            "image_url": "data:image/png;base64," + get_image_base64('classification.png'),
+            "prompt": "텍스트 분류기를 만들어주세요. transformers.js의 'text-classification' 파이프라인을 사용하여 텍스트를 미리 정의된 카테고리로 분류하는 인터페이스를 만들어주세요."
+        }        #이상 19개, 이하 26개
+
+        {
+            "name": "[응용] BMI 계산기",
             "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "키(cm)와 몸무게(kg)를 입력받아 BMI를 계산하고, 비만도 판정 결과를 시각적으로 표시하는 앱을 만드세요. 결과는 저체중/정상/과체중/비만으로 구분하여 표시합니다."
         },
         {
-            "name": "[기본] 할인 계산기",
+            "name": "[응용] 할인 계산기",
             "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "상품의 원가와 할인율을 입력받아 할인가를 계산하는 앱을 만드세요. 할인율은 슬라이더로 조절 가능하며, 최종 가격과 절약 금액을 실시간으로 표시합니다."
         },
         {
-            "name": "[기본] 단위 변환기",
+            "name": "[응용] 단위 변환기",
             "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "길이(m/cm/km), 무게(kg/g), 온도(섭씨/화씨) 등 기본적인 단위 변환기를 만드세요. 드롭다운으로 변환 단위를 선택하고 실시간으로 결과가 업데이트됩니다."
         },
         {
-            "name": "[기본] 랜덤 번호 생성기",
+            "name": "[응용] 랜덤 번호 생성기",
             "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "로또 번호나 랜덤 비밀번호를 생성하는 앱을 만드세요. 사용자가 범위와 개수를 지정할 수 있으며, 생성된 번호는 정렬되어 표시됩니다."
         },
 
         {
-            "name": "[기본] 이미지 편집기",
+            "name": "[응용] 이미지 편집기",
             "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "PIL과 numpy를 사용하여 이미지 필터(흑백, 세피아, 블러 등), 회전, 리사이즈 기능이 있는 기본적인 이미지 편집기를 만드세요."
         },
         {
-            "name": "[기본] 일기예보 대시보드",
+            "name": "[응용] 일기예보 대시보드",
             "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "OpenWeatherMap API를 사용하여 도시별 날씨 정보를 가져오고, 온도, 습도, 풍속 등을 시각화하는 대시보드를 만드세요."
         },
-        # 응용 레벨 (20건) - 허깅페이스 모델 통합
+        
+        
         {
-            "name": "[AI-1] 텍스트 요약기",
+            "name": "[응용] 텍스트 요약기",
             "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "허깅페이스의 text-summarization 모델을 사용하여 긴 텍스트를 자동으로 요약하는 앱을 만드세요."
         },
 
 
         {
-            "name": "[심리] MBTI 진단 서비스",
+            "name": "[응용] MBTI 진단 서비스",
             "image_url": "data:image/png;base64," + get_image_base64('mbti.png'),
             "prompt": "16가지 성격유형 진단을 위한 15개의 객관식 질문을 제시하고, 응답 결과에 따른 MBTI 유형과 성격 특성을 분석하여 출력하세요."
         },
         {
-            "name": "[심리] 나의 심리상태 퀴즈",
+            "name": "[활용] 나의 심리상태 퀴즈",
             "image_url": "data:image/png;base64," + get_image_base64('simri.png'),
             "prompt": "10개의 심리진단 객관식 문항을 통해 현재 심리상태를 분석하고, 스트레스 수준과 대처 방안을 제시하세요."
         },
 
+        
+#여기부터 각각 전수검사할것
         # AI/분석 카테고리
         {
-            "name": "[대시보드] 투자 포트폴리오 분석",
+            "name": "[활용] 투자 포트폴리오 분석",
             "image_url": "data:image/png;base64," + get_image_base64('dash.png'),
             "prompt": "주식 포트폴리오의 구성비율과 투자금액을 입력받아 위험도, 수익률을 분석하고 차트로 시각화하세요."
         },
         {
-            "name": "[AI] 텍스트 요약 도구",
+            "name": "[활용] 텍스트 요약 도구",
             "image_url": "data:image/png;base64," + get_image_base64('yout.png'),
             "prompt": "긴 텍스트를 입력받아 핵심 내용을 추출하고 요약하여 출력하세요. 요약 길이는 사용자가 조절할 수 있어야 합니다."
         },
         {
-            "name": "[멀티모달] 텍스트 음성변환",
+            "name": "[활용] 텍스트 음성변환",
             "image_url": "data:image/png;base64," + get_image_base64('tts.png'),
             "prompt": "입력된 텍스트를 자연스러운 음성으로 변환하고, 음성의 속도와 톤을 조절할 수 있게 구현하세요."
         },
 
         # 도구/유틸리티 카테고리
         {
-            "name": "[도구] 설문조사 제작",
+            "name": "[활용] 설문조사 제작",
             "image_url": "data:image/png;base64," + get_image_base64('survay.png'),
             "prompt": "설문 제목, 질문 유형, 보기를 입력받아 설문지를 생성하고 응답을 수집/분석하여 결과를 차트로 표시하세요."
         },
         {
-            "name": "[도구] 이미지 편집기",
+            "name": "[활용] 이미지 편집기",
             "image_url": "data:image/png;base64," + get_image_base64('129.png'),
             "prompt": "이미지 업로드 후 필터적용, 자르기, 회전 등 기본 편집 기능을 제공하고 편집된 이미지를 저장하세요."
         },
         {
-            "name": "[시각화] 데이터 차트",
+            "name": "[활용] 데이터 차트",
             "image_url": "data:image/png;base64," + get_image_base64('124.png'),
             "prompt": "데이터를 입력받아 막대, 선, 파이 차트로 시각화하고, 차트 유형 전환과 데이터 갱신을 실시간으로 처리하세요."
         },
 
         # 엔터테인먼트 카테고리
         {
-            "name": "[Fun] 타로카드 운세",
+            "name": "[활용] 타로카드 운세",
             "image_url": "data:image/png;base64," + get_image_base64('tarot.png'),
             "prompt": "사용자 질문을 입력받고 1-5장의 타로카드를 무작위로 선택하여 각 카드의 의미와 해석을 제공하세요."
         },
         {
-            "name": "[Fun] AI 요리사",
+            "name": "[활용] AI 요리사",
             "image_url": "data:image/png;base64," + get_image_base64('cook.png'),
             "prompt": "선택한 재료들로 만들 수 있는 요리를 추천하고 상세 레시피와 조리과정을 단계별로 안내하세요."
         },
         {
-            "name": "[Fun] 행운의 룰렛",
+            "name": "[활용] 행운의 룰렛",
             "image_url": "data:image/png;base64," + get_image_base64('roolet.png'),
             "prompt": "랜덤 상금이 배치된 룰렛을 회전시키고 결과값을 애니메이션과 함께 표시하세요."
         },
 
         # 이미지/비디오 처리
         {
-            "name": "[멀티미디어] 실시간 필터",
+            "name": "[활용] 실시간 필터",
             "image_url": "data:image/png;base64," + get_image_base64('mouse.png'), 
             "prompt": "웹캠 영상에 실시간으로 다양한 필터효과를 적용하고 필터 강도를 조절할 수 있게 구현하세요."
         },
-        {
-            "name": "[이미지] OCR 텍스트 추출",
-            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'), 
-            "prompt": "이미지에서 텍스트를 인식하여 추출하고, 추출된 텍스트를 편집가능한 형태로 제공하세요."
-        },
 
         # 교육/학습 도구
         {
-            "name": "[학습] 단어 암기 카드",
+            "name": "[활용] 단어 암기 카드",
             "image_url": "data:image/png;base64," + get_image_base64('mouse.png'), 
             "prompt": "단어장을 입력받아 플래시카드 형태로 학습할 수 있게 만들고, 학습 진행도를 추적하세요."
         },
         {
-            "name": "[학습] 수학 문제 생성기",
+            "name": "[활용] 수학 문제 생성기",
             "image_url": "data:image/png;base64," + get_image_base64('mouse.png'), 
             "prompt": "선택한 수학 주제와 난이도에 따라 문제를 자동 생성하고 풀이 과정을 단계별로 설명하세요."
         },
 
-        # 비즈니스 도구
-        {
-            "name": "[비즈니스] 명함 스캐너",
-            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'), 
-            "prompt": "명함 이미지를 분석하여 연락처 정보를 추출하고 디지털 주소록 형태로 저장하세요."
-        },
-        {
-            "name": "[비즈니스] 문서 번역기",
-            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'), 
-            "prompt": "텍스트나 문서를 입력받아 선택한 언어로 번역하고, 전문용어 사전을 활용해 정확도를 높이세요."
-        },
-
         # 데이터 분석
         {
-            "name": "[분석] 감정 분석기",
+            "name": "[활용] 감정 분석기",
             "image_url": "data:image/png;base64," + get_image_base64('mouse.png'), 
             "prompt": "텍스트의 감정을 분석하여 긍정/부정/중립을 판단하고 감정 강도를 수치화하여 차트로 표시하세요."
         },
         {
-            "name": "[분석] 데이터 시각화",
+            "name": "[활용] 데이터 시각화",
             "image_url": "data:image/png;base64," + get_image_base64('mouse.png'), 
             "prompt": "CSV 데이터를 업로드하면 자동으로 데이터 유형을 분석하고 적절한 차트로 시각화하세요."
         },
 
         # 오디오 처리
         {
-            "name": "[오디오] 음성 인식기",
+            "name": "[활용] 음성 인식기",
             "image_url": "data:image/png;base64," + get_image_base64('mouse.png'), 
             "prompt": "실시간 음성을 텍스트로 변환하고 화자의 감정과 어조를 분석하여 표시하세요."
         },
         {
-            "name": "[오디오] 음악 장르 분류",
+            "name": "[활용] 음악 장르 분류",
             "image_url": "data:image/png;base64," + get_image_base64('mouse.png'), 
             "prompt": "음악 파일을 분석하여 장르를 분류하고 템포, 키, 악기 구성을 파악하여 출력하세요."
         }
     ]
 
 def load_best_templates():
-    json_data = load_json_data()[:12]  # 베스트 템플릿
+    json_data = load_json_data()[:14]  # 베스트 템플릿
     return create_template_html("🏆 베스트 템플릿", json_data)
 
 def load_trending_templates():
-    json_data = load_json_data()[12:24]  # 트렌딩 템플릿
+    json_data = load_json_data()[14:28]  # 트렌딩 템플릿
     return create_template_html("🔥 트렌딩 템플릿", json_data)
 
 def load_new_templates():
-    json_data = load_json_data()[24:44]  # NEW 템플릿
+    json_data = load_json_data()[28:50]  # NEW 템플릿
     return create_template_html("✨ NEW 템플릿", json_data)
 
 def create_template_html(title, items):