Update app.py

app.py

@@ -289,232 +289,214 @@ def send_to_sandbox(code):
 theme = gr.themes.Soft()
 
 def load_json_data():
-    # 하드코딩된 데이터 반환
     return [
+        # 초급 레벨 (5건) - 기본 문법과 UI 익히기
         {
-            "name": "[게임] 보석 팡팡 게임",
-            "image_url": "data:image/gif;base64," + get_image_base64('jewel.gif'),  # mouse.gif 사용
-            "prompt": "이 게임 구성 프롬프트는 https://huggingface.co/spaces/openfree/ifbhdc 참조"
-        },    
-        {
-            "name": "[홈페이지] AI 스타트업",
-            "image_url": "data:image/png;base64," + get_image_base64('home.png'),  # mouse.gif 사용
-            "prompt": "랜딩 페이지를 만들어라. 전문가 제작 형태의 멋진 비주얼로 구성,이모지를 적절히 활용하고 다음의 내용을 참고하여 반영하도록 하라.마우스-I는 사용자가 원하는 웹 서비스를 프롬프트로 입력하면 60초 이내에 실제 작동하는 웹 서비스를 자동 생성하는 도구다. 마우스-I의 주요 기능은 ▲원클릭 실시간 배포 ▲실시간 미리보기 ▲40여 가지 즉시 적용 템플릿 ▲실시간 수정 등이다. MBTI 테스트, 투자 관리 도구, 테트리스 게임 등 다양한 템플릿을 제공해 비개발자도 즉시 활용할 수 있다."
-        },        
-        {
-            "name": "[심리] MBTI 진단 서비스",
-            "image_url": "data:image/png;base64," + get_image_base64('mbti.png'),  # mbti.png 사용
-            "prompt": "MBTI 진단을 위해 15개의 질문과 객관식 답변을 통해 MBTI 진단 결과 및 해당 성격에 대한 상세한 결과를 출력하라"
-        },        
-        {
-            "name": "[대시 보드] 투자 포트폴리오 대시보드",
-            "image_url": "data:image/png;base64," + get_image_base64('dash.png'),  # mouse.gif 사용
-            "prompt": "Create an interactive dashboard with Chart.js showing different types of charts (line, bar, pie) with smooth animations. Include buttons to switch between different data views.투자 포트폴리오를 분석하여 위험도, 수익률, 자산 배분을 시각화하는 투자 관리 도구를 만드세요."
+            "name": "[초급-1] 구구단 계산기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "구구단을 계산하고 출력하는 간단한 계산기를 만드세요. 사용자가 숫자를 입력하면 해당 단의 구구단이 출력되고, '전체 구구단 보기' 버튼을 누르면 2~9단까지 모두 표시됩니다."
         },
         {
-            "name": "[멀티모달] 오디오 비주얼라이저",
-            "image_url": "data:image/png;base64," + get_image_base64('audio.png'),  # mouse.gif 사용
-            "prompt": "Web Audio API와 Canvas를 사용하여 오디오 비주얼라이저를 제작해 보세요. 음악 주파수 데이터에 반응하는 동적인 막대들이 부드러운 애니메이션으로 움직이도록 구현해야 합니다. 또한 재생/일시 정지 컨트롤과 색상 테마 선택 기능도 포함하세요."
-        },        
-        {
-            "name": "[게임] 체스 게임",
-            "image_url": "data:image/png;base64," + get_image_base64('chess.png'),  # mouse.gif 사용
-            "prompt": "체스 게임: 체스 게임의 룰을 정확하게 식별하고 적용하라, 상대방은 auto로 게임을 진행하라"
+            "name": "[초급-2] BMI 계산기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "키(cm)와 몸무게(kg)를 입력받아 BMI를 계산하고, 비만도 판정 결과를 시각적으로 표시하는 앱을 만드세요. 결과는 저체중/정상/과체중/비만으로 구분하여 표시합니다."
         },
         {
-            "name": "[게임] 벽돌깨기 게임",
-            "image_url": "data:image/png;base64," + get_image_base64('alcaroid.png'),  # mouse.gif 사용
-            "prompt": "벽돌깨기 게임"
-        },        
+            "name": "[초급-3] 할인 계산기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "상품의 원가와 할인율을 입력받아 할인가를 계산하는 앱을 만드세요. 할인율은 슬라이더로 조절 가능하며, 최종 가격과 절약 금액을 실시간으로 표시합니다."
+        },
         {
-            "name": "[Fun] 타로카드 운세",
-            "image_url": "data:image/png;base64," + get_image_base64('tarot.png'),  # mouse.gif 사용
-            "prompt": "타로카드 운세를 점치는것을 생성하라. 아주 상세하고 전문적이면서 쉽고 길게 답변하라. 모든 답변과 설명은 한글로 하라"
+            "name": "[초급-4] 단위 변환기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "길이(m/cm/km), 무게(kg/g), 온도(섭씨/화씨) 등 기본적인 단위 변환기를 만드세요. 드롭다운으로 변환 단위를 선택하고 실시간으로 결과가 업데이트됩니다."
         },
         {
-            "name": "[Fun] AI 요리사",
-            "image_url": "data:image/png;base64," + get_image_base64('cook.png'),  # mouse.gif 사용
-            "prompt": "다양한 음식 재료 10개를 제시하고, 그중 선택한 재료 카드를 '요리 냄비'안에 집어넣고 '요리'를 클릭하면, 반드시 선택한 재료로 만들 수 있는 요리와 레시피를 출력하여야 하며 요리 레시피 크롤링 이나 검색을 통해 적용하라"
-        },     
+            "name": "[초급-5] 랜덤 번호 생성기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "로또 번호나 랜덤 비밀번호를 생성하는 앱을 만드세요. 사용자가 범위와 개수를 지정할 수 있으며, 생성된 번호는 정렬되어 표시됩니다."
+        },
+
+        # 중급 레벨 (5건) - 데이터 처리와 시각화
         {
-            "name": "[멀티모달] 텍스트로 음성 생성 및 조정",
-            "image_url": "data:image/png;base64," + get_image_base64('tts.png'),  # mouse.gif 사용
-            "prompt": "텍스트를 음성으로 변환하고, 음성 파라미터를 실시간으로 조정할 수 있는 인터페이스를 제공하세요."
+            "name": "[중급-1] 데이터 시각화 대시보드",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "CSV 파일을 업로드하여 기본 통계(평균, 중앙값, 표준편차)를 계산하고, matplotlib으로 히스토그램, 박스플롯, 산점도를 그리는 대시보드를 만드세요."
         },
         {
-            "name": "[학습] 3D 분자 시뮬레이션",
-            "image_url": "data:image/png;base64," + get_image_base64('3ds.png'),  # mouse.gif 사용
-            "prompt": "Three.js로 3D 분자 구조(주요 분자들을 선택할 수 있게)를 시각화하세요. 회전, 줌, 원자 정보 표시 기능과 애니메이션 효과를 구현하세요."
-        },   
+            "name": "[중급-2] 주식 데이터 분석기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "주식 데이터를 분석하여 이동평균선, RSI, MACD 등 기술적 지표를 계산하고 시각화하는 앱을 만드세요. plotly를 사용하여 인터랙티브한 차트를 구현합니다."
+        },
         {
-            "name": "[컴포넌트] 이메일 회원가입 및 로그인",
-            "image_url": "data:image/png;base64," + get_image_base64('login.png'),  # mouse.gif 사용
-            "prompt": "이메일 회원가입 & 로그인 웹페이지를 만들어주세요. 다음 요구사항을 반영해주세요: 1. 디자인 - 모던하고 미니멀한 UI/UX - 반응형 레이아웃 - 부드러운 애니메이션 효과 - 적절한 폼 validation 피드백 2. 회원가입 기능 3. 로그인 기능 - 이메일/비밀번호 입력 - 자동로그인 기능 - 비밀번호 찾기 링크 - 로그인 실패시 에러 메시지 - 로그인 성공시 환영 메시지 "
-        },   
+            "name": "[중급-3] 이미지 편집기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "PIL과 numpy를 사용하여 이미지 필터(흑백, 세피아, 블러 등), 회전, 리사이즈 기능이 있는 기본적인 이미지 편집기를 만드세요."
+        },
         {
-            "name": "[심리] 나의 심리상태 퀴즈 ",
-            "image_url": "data:image/png;base64," + get_image_base64('simri.png'),
-            "prompt": "다양한 심리 상태 파악을 위한 객관식 문제 출제하고, 선택 결과에 대한 심리학적 해설을 해줘. 예) 길을 가는 당신이 만난 동물입니다. 1) 개 2) 사자 3) 곰 4) 고양이 "
-        },      
+            "name": "[중급-4] 일기예보 대시보드",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "OpenWeatherMap API를 사용하여 도시별 날씨 정보를 가져오고, 온도, 습도, 풍속 등을 시각화하는 대시보드를 만드세요."
+        },
         {
-            "name": "[Fun] 행운의 룰렛",
-            "image_url": "data:image/png;base64," + get_image_base64('roolet.png'),  # mouse.gif 사용
-            "prompt": "행운의 원형 룰렛이 빠르게 돌아가고, 마우스로 화살 발사 버튼 누르면 룰렛의 번호에 랜덤하게 맞는다. 각 번호에 상금이 '꽝' ~ '100만원' 까지 랜덤하게 배치되어 있다. shoot 선택된 번호에 따라 해당 번호에 배치된 상금 액수도 출력하라"
-        },        
+            "name": "[중급-5] 음성 파형 분석기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "librosa를 사용하여 음성 파일을 업���드하고 파형, 스펙트로그램을 표시하며 기본적인 오디오 특성(주파수, 진폭)을 분석하는 앱을 만드세요."
+        },
+
+        # 고급 레벨 (10건) - 머신러닝/딥러닝 기초
         {
-            "name": "[게임] 테트리스 게임",
-            "image_url": "data:image/png;base64," + get_image_base64('127.png'),
-            "prompt": "고전 테트리스 게임을 만드세요. 스타트와 리스타트 버튼을 포함하세요. 테트리스의 규칙을 잘 따라야합니다."
-        },        
-    
+            "name": "[고급-1] 손글씨 숫자 인식기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "MNIST 데이터셋으로 학습된 CNN 모델을 사용하여 손으로 그린 숫자를 인식하는 앱을 만드세요. 캔버스에 그림을 그리면 실시간으로 예측합니다."
+        },
         {
-            "name": "[게임] 카드 기억 게임", 
-            "image_url": "data:image/png;base64," + get_image_base64('112.png'),
-            "prompt": "Create a classic memory matching card game with flip animations. Include a scoring system, timer, and difficulty levels. Add satisfying match/mismatch animations and sound effects using Web Audio API."
-        },   #여기까지 베스트(12건) 적용 대상
+            "name": "[고급-2] 얼굴 감지기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "OpenCV와 dlib을 사용하여 이미지에서 얼굴을 감지하고 랜드마크를 표시하는 앱을 만드세요. 나이와 성별도 예측합니다."
+        },
         {
-            "name": "[도구] 인터랙티브 스케쥴러",
-            "image_url": "data:image/png;base64," + get_image_base64('122.png'),
-            "prompt": "드래그 앤 드롭으로 일정을 관리할 수 있는 달력을 만드세요. 애니메이션 효과와 일정 필터링 기능을 추가하세요."
+            "name": "[고급-3] 텍스트 감성 분석기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "NLTK와 scikit-learn을 사용하여 텍스트의 감성(긍정/부정)을 분석하고 점수를 매기는 앱을 만드세요."
         },
         {
-            "name": "[게임] 타자 게임",
-            "image_url": "data:image/png;base64," + get_image_base64('123.png'),
-            "prompt": "떨어지는 단어를 타이핑하여 점수를 얻는 게임을 만드세요. 난이도 조절과 효과음을 추가하세요."
+            "name": "[고급-4] 이미지 세그멘테이션",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "U-Net 모델을 사용하여 이미지의 객체를 분할하고 마스크를 생성하는 앱을 만드세요."
         },
         {
-            "name": "[애니메이션] 인터렉티브 STARs",
-            "image_url": "data:image/png;base64," + get_image_base64('135.png'),
-            "prompt": "Interactive Stars: Watch stars and constellations appear in the night sky as you move your mouse."
-        },        
+            "name": "[고급-5] 시계열 예측기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "Prophet을 사용하여 시계열 데이터를 분석하고 미래 값을 예측하는 앱을 만드세요. 계절성과 트렌드를 시각화합니다."
+        },
         {
-            "name": "[3D] 지형 생성기",
-            "image_url": "data:image/png;base64," + get_image_base64('131.png'),
-            "prompt": "Three.js로 프로시저럴 지형을 생성하세요. 고도, 텍스처, 물 효과를 실시간으로 조정할 수 있게 만드세요."
+            "name": "[고급-6] 객체 탐지기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "YOLO 모델을 사용하여 이미지나 비디오에서 객체를 탐지하고 바운딩 박스를 그리는 앱을 만드세요."
         },
         {
-            "name": "[3D] 텍스트 애니메이터",
-            "image_url": "data:image/png;base64," + get_image_base64('132.png'),
-            "prompt": "Three.js로 3D 텍스트 애니메이션을 만드세요. 다양한 변환 효과와 물리 기반 입자 효과를 구현하세요."
-        },        
+            "name": "[고급-7] 음성 인식기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "DeepSpeech 모델을 사용하여 음성을 텍스트로 변환하는 앱을 만드세요. 실시간 음성 입력도 지원합니다."
+        },
         {
-            "name": "[위젯] 날씨 애니메이션",
-            "image_url": "data:image/png;base64," + get_image_base64('114.png'),
-            "prompt": "현재 날씨 상태를 보여주는 애니메이션 위젯을 만드세요. 비, 눈, 구름, 번개 등의 날씨 효과를 Canvas로 구���하고 부드러운 전환 효과를 추가하세요."
+            "name": "[고급-8] 이미지 스타일 변환",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "CycleGAN을 사용하여 이미지의 스타일을 다른 화풍으로 변환하는 앱을 만드세요."
         },
-       {
-            "name": "[시뮬레이션] 물리 엔진",
-            "image_url": "data:image/png;base64," + get_image_base64('125.png'),
-            "prompt": "Canvas를 사용하여 간단한 물리 시뮬레이션을 구현하세요. 중력, 충돌, 탄성 효과를 적용한 공 튀기기 시뮬레이션을 만드세요."
+        {
+            "name": "[고급-9] 포즈 추정기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "PoseNet을 사용하여 이미지나 비디오에서 사람의 포즈를 추정하고 관절을 표시하는 앱을 만드세요."
         },
         {
-            "name": "[오디오] 사운드 믹서",
-            "image_url": "data:image/png;base64," + get_image_base64('126.png'),
-            "prompt": "Web Audio API를 사용하여 여러 음원을 믹싱할 수 있는 인터페이스를 만드세요. 볼륨, 패닝, 이펙트 조절 기능을 구현하세요."
-        },        
+            "name": "[고급-10] 이상치 탐지기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "Isolation Forest를 사용하여 데이터셋에서 이상치를 탐지하고 시각화하는 앱을 만드세요."
+        },
+
+        # 응용 레벨 (20건) - 허깅페이스 모델 통합
         {
-            "name": "[이펙트] 파티클 텍스트",
-            "image_url": "data:image/png;base64," + get_image_base64('116.png'),
-            "prompt": "텍스트가 파티클로 변환되는 효과를 구현하세요. 마우스 호버시 글자가 흩어졌다가 다시 모이는 애니메이션을 Canvas로 만드세요."
+            "name": "[AI-1] 텍스트 요약기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "허깅페이스의 text-summarization 모델을 사용하여 긴 텍스트를 자동으로 요약하는 앱을 만드세요."
         },
         {
-            "name": "[3D] 책장 갤러리",
-            "image_url": "data:image/png;base64," + get_image_base64('115.png'),
-            "prompt": "CSS 3D 변환을 사용하여 회전하는 책장 형태의 갤러리를 만드세요. 각 책을 클릭하면 상세 정보가 나타나도록 구현하세요."
-        }, 
+            "name": "[AI-2] 이미지 캡션 생성기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "Vit-GPT2-Image-Captioning 모델을 사용하여 이미지를 설명하는 캡션을 생성하는 앱을 만드세요."
+        },
         {
-            "name": "[게임] 리듬 게임",
-            "image_url": "data:image/png;base64," + get_image_base64('117.png'),
-            "prompt": "Web Audio API를 활용한 간단한 리듬 게임을 만드세요. 떨어지는 노트와 타이밍 판정, 점수 시스템을 구현하세요."
+            "name": "[AI-3] 질문 답변 시스템",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "BERT-QA 모델을 사용하여 주어진 문맥에서 질문에 답변하는 앱을 만드세요."
         },
         {
-            "name": "[애니메이션] SVG 패스",
-            "image_url": "data:image/png;base64," + get_image_base64('118.png'),
-            "prompt": "SVG 패스를 따라 움직이는 애니메이션을 구현하세요. 다양한 도형이 그려지는 과정을 보여주고 인터랙티브한 컨트롤을 추가하세요."
-        }, #여기까지가 트렌드 12개 항목임
+            "name": "[AI-4] 감정 분석기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "RoBERTa 감정 분석 모델을 사용하여 텍스트의 감정을 분석하는 앱을 만드세요."
+        },
         {
-            "name": "[도구] 드로잉 보드",
-            "image_url": "data:image/png;base64," + get_image_base64('119.png'),
-            "prompt": "Canvas를 사용한 그리기 도구를 만드세요. 브러시 크기, 색상 변경, 지우개 기능과 그리기 기록 저장 기능을 구현하세요."
+            "name": "[AI-5] 이미지 생성기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "Stable Diffusion 모델을 사용하여 텍스트 설명으로부터 이미지를 생성하는 앱을 만드세요."
         },
+
         {
-            "name": "[게임] 퍼즐 슬라이드",
-            "image_url": "data:image/png;base64," + get_image_base64('120.png'),
-            "prompt": "숫자나 이미지를 사용한 슬라이드 퍼즐 게임을 만드세요. 이동 애��메이션과 완성 확인 기능을 추가하세요."
+            "name": "[AI-6] 음성 합성기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "Coqui TTS 모델을 사용하여 텍스트를 자연스러운 음성으로 변환하는 앱을 만드세요. 다양한 목소리와 감정 조절이 가능합니다."
         },
         {
-            "name": "[컴포넌트] 인터렉티브 타임라인",
-            "image_url": "data:image/png;base64," + get_image_base64('111.png'),
-            "prompt": "Create a vertical timeline with animated entry points. When clicking on timeline items, show detailed information with smooth transitions. Include filtering options and scroll animations."
+            "name": "[AI-7] 코드 자동완성",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "CodeBERT 모델을 사용하여 프로그래밍 코드를 자동으로 완성하고 제안하는 앱을 만드세요."
         },
         {
-            "name": "[도구] 설문조사 작성",
-            "image_url": "data:image/png;base64," + get_image_base64('survay.png'),
-            "prompt": "설문조사 작성: 결혼에 대한 인식 조사를 위해 총 10개의 설문(이메일 주소, 생년 입력)과 분석을 하라. 수집된 정보는 로컬스토리지에 log파일로 저장하게 하라."
-        },   
+            "name": "[AI-8] 이미지 복원기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "GFPGAN 모델을 사용하여 흐릿하거나 손상된 이미지, 특히 얼굴 사진을 복원하는 앱을 만드세요."
+        },
         {
-            "name": "[시각화] 데이터 애니메이션",
-            "image_url": "data:image/png;base64," + get_image_base64('124.png'),
-            "prompt": "D3.js를 사용하여 데이터 변화를 애니메이션으로 보여주는 차트를 만드세요. 다양한 전환 효과를 추가하세요."
+            "name": "[AI-9] 다국어 번역기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "M2M100 모델을 사용하여 100개 이상의 언어 간 번역을 지원하는 앱을 만드세요."
         },
         {
-            "name": "[도구] 유튜브 영상 재생/분석/요약",
-            "image_url": "data:image/png;base64," + get_image_base64('yout.png'),
-            "prompt": "유튜브 url을 입력하면 영상이 출력되라. 해당 영상에 대한 추가적인 분석이나 요약도 필요하다"
-        },      
+            "name": "[AI-10] 문서 OCR",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "Donut-base 모델을 사용하여 문서 이미지에서 텍스트를 추출하고 구조화된 형식으로 변환하는 앱을 만드세요."
+        },
         {
-            "name": "[도구] 세계 지도/ 국가 지도",
-            "image_url": "data:image/png;base64," + get_image_base64('map.png'),
-            "prompt": "세계지도 맵을 기반으로 국가별 지도 표시 및 인구수를 차트로 출력하는 대시보드"
-        },  
+            "name": "[AI-11] 음악 생성기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "Riffusion 모델을 사용하여 텍스트 설명을 바탕으로 음악을 생성하는 앱을 만드세요."
+        },
         {
-            "name": "[컴포넌트] 게시판",
-            "image_url": "data:image/png;base64," + get_image_base64('128.png'),
-            "prompt": "인터넷 게시판을 만드세요. 텍스트를 입력하면 저장되고 읽을 수 있어야 합니다."
+            "name": "[AI-12] 비디오 설명 생성기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "VideoMAE 모델을 사용하여 비디오 클립의 내용을 자동으로 설명하는 앱을 만드세요."
         },
         {
-            "name": "[도구] 포토 에디터",
-            "image_url": "data:image/png;base64," + get_image_base64('129.png'),
-            "prompt": "Canvas를 사용하여 기본적인 이미지 편집 도구를 만드세요. 필터 적용, 자르기, 회전 기능을 구현하세요."
+            "name": "[AI-13] 챗봇 어시스턴트",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "DialoGPT 모델을 사용하여 자연스러운 대화가 가능한 챗봇을 만드세요."
         },
         {
-            "name": "[시각화] 마인드맵",
-            "image_url": "data:image/png;base64," + get_image_base64('130.png'),
-            "prompt": "D3.js를 사용하여 동적 마인드맵을 만드세요. 노드 추가/삭제, 드래그 앤 드롭, 확장/축소 애니메이션을 구현하세요."
+            "name": "[AI-14] 이미지 배경 제거",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "U2Net 모델을 사용하여 이미지에서 배경을 자동으로 제거하는 앱을 만드세요."
         },
-
-
         {
-            "name": "[도구] 패턴 디자이너",
-            "image_url": "data:image/png;base64," + get_image_base64('133.png'),
-            "prompt": "SVG로 반복 패턴을 디자인하는 도구를 만드세요. 대칭 옵션, 색상 스키마 관리, 실시간 프리뷰를 구현하세요."
+            "name": "[AI-15] 텍스트 분류기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "DistilBERT 모델을 사용하여 텍스트를 여러 카테고리로 분류하는 앱을 만드세요."
         },
         {
-            "name": "[멀티미디어] 실시간 필터 카메라",
-            "image_url": "data:image/png;base64," + get_image_base64('134.png'),
-            "prompt": "WebRTC와 Canvas를 사용하여 실시간 비디오 필터 앱을 만드세요. 다양한 이미지 처리 효과를 구현하세요."
+            "name": "[AI-16] 얼굴 교체기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "SimSwap 모델을 사용하여 이미지에서 얼굴을 다른 얼굴로 자연스럽게 교체하는 앱을 만드세요."
         },
-
         {
-            "name": "[시각화] 실시간 데이터 플로우",
-            "image_url": "data:image/png;base64," + get_image_base64('136.png'),
-            "prompt": "D3.js로 실시간 데이터 흐름을 시각화하세요. 노드 기반 데이터 처리와 애니메이션 효과를 구현하세요."
-        },   
+            "name": "[AI-17] 문법 교정기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "GrammarGPT 모델을 사용하여 텍스트의 문법 오류를 감지하고 수정하는 앱을 만드세요."
+        },
         {
-            "name": "[인터랙티브] 컬러 팔레트",
-            "image_url": "data:image/png;base64," + get_image_base64('113.png'),
-            "prompt": "마우스 움직임에 따라 동적으로 변하는 컬러 팔레트를 만드세요. 색상 선택, 저장, 조합 기능과 함께 부드러운 그라데이션 효과를 구현하세요."
-        },   
+            "name": "[AI-18] 3D 포즈 추정기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "PARE 모델을 사용하여 2D 이미지에서 3D 인체 포즈를 추정하는 앱을 만드세요."
+        },
         {
-            "name": "[이펙트] 파티클 커서",
-            "image_url": "data:image/png;base64," + get_image_base64('121.png'),
-            "prompt": "마우스 커서를 따라다니는 파티클 효과를 만드세요. 다양한 파티클 패턴과 색상 변화를 구현하세요."
-        },            
-     
+            "name": "[AI-19] 음성 감정 분석기",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "Wav2Vec2 모델을 사용하여 음성에서 화자의 감정 상태를 분석하는 앱을 만드세요."
+        },
         {
-            "name": "[홈페이지] AI 스타트업",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),  # mouse.gif 사용
-            "prompt": "랜딩 페이지를 만들어라. 전문가 제작 형태의 멋진 비주얼로 구성,이모지를 적절히 활용하고 다음의 내용을 참고하여 반영하도록 하라.마우스-I는 사용자가 원하는 웹 서비스를 프롬프트로 입력하면 60초 이내에 실제 작동하는 웹 서비스를 자동 생성하는 도구다. 마우스-I의 주요 기능은 ▲원클릭 실시간 배포 ▲실시간 미리보기 ▲40여 가지 즉시 적용 템플릿 ▲실시간 수정 등이다. MBTI 테스트, 투자 관리 도구, 테트리스 게임 등 다양한 템플릿을 제공해 비개발자도 즉시 활용할 수 있다."
+            "name": "[AI-20] 이미지 스타일 변환",
+            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "prompt": "MAGiC 모델을 사용하여 이미지의 스타일을 다양한 예술 작품 스타일로 변환하는 앱을 만드세요."
         }
     ]
 
@@ -974,8 +956,8 @@ with gr.Blocks(css_paths="app.css",theme=theme) as demo:
 # UI 수정 부분 - antd.Col(span=24, md=8) 내부의 버튼 컨테이너에 배포 버튼 추가:
                         with antd.Flex(gap="small", justify="space-between"):
                             btn = antd.Button("Send", type="primary", size="large")
-                            execute_btn = antd.Button("Code 실행", type="default", size="large")
-                            deploy_btn = antd.Button("배포하기", type="default", size="large")  # 추가
+                        #    execute_btn = antd.Button("Code 실행", type="default", size="large")
+                            deploy_btn = antd.Button("실행하기", type="default", size="large")  # 추가
                             clear_btn = antd.Button("Clear", type="default", size="large")
 
 # 배포 결과를 표시할 텍스트 영역 추가