Update app.py

app.py

@@ -293,159 +293,159 @@ def load_json_data():
         # 초급 레벨 (5건) - 기본 문법과 UI 익히기
         {
             "name": "[초급-1] 구구단 계산기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),             
             "prompt": "구구단을 계산하고 출력하는 간단한 계산기를 만드세요. 사용자가 숫자를 입력하면 해당 단의 구구단이 출력되고, '전체 구구단 보기' 버튼을 누르면 2~9단까지 모두 표시됩니다."
         },
         {
             "name": "[초급-2] BMI 계산기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "키(cm)와 몸무게(kg)를 입력받아 BMI를 계산하고, 비만도 판정 결과를 시각적으로 표시하는 앱을 만드세요. 결과는 저체중/정상/과체중/비만으로 구분하여 표시합니다."
         },
         {
             "name": "[초급-3] 할인 계산기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "상품의 원가와 할인율을 입력받아 할인가를 계산하는 앱을 만드세요. 할인율은 슬라이더로 조절 가능하며, 최종 가격과 절약 금액을 실시간으로 표시합니다."
         },
         {
             "name": "[초급-4] 단위 변환기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "길이(m/cm/km), 무게(kg/g), 온도(섭씨/화씨) 등 기본적인 단위 변환기를 만드세요. 드롭다운으로 변환 단위를 선택하고 실시간으로 결과가 업데이트됩니다."
         },
         {
             "name": "[초급-5] 랜덤 번호 생성기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "로또 번호나 랜덤 비밀번호를 생성하는 앱을 만드세요. 사용자가 범위와 개수를 지정할 수 있으며, 생성된 번호는 정렬되어 표시됩니다."
         },
 
         # 중급 레벨 (5건) - 데이터 처리와 시각화
         {
             "name": "[중급-1] 데이터 시각화 대시보드",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "CSV 파일을 업로드하여 기본 통계(평균, 중앙값, 표준편차)를 계산하고, matplotlib으로 히스토그램, 박스플롯, 산점도를 그리는 대시보드를 만드세요."
         },
         {
             "name": "[중급-2] 주식 데이터 분석기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "주식 데이터를 분석하여 이동평균선, RSI, MACD 등 기술적 지표를 계산하고 시각화하는 앱을 만드세요. plotly를 사용하여 인터랙티브한 차트를 구현합니다."
         },
         {
             "name": "[중급-3] 이미지 편집기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "PIL과 numpy를 사용하여 이미지 필터(흑백, 세피아, 블러 등), 회전, 리사이즈 기능이 있는 기본적인 이미지 편집기를 만드세요."
         },
         {
             "name": "[중급-4] 일기예보 대시보드",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "OpenWeatherMap API를 사용하여 도시별 날씨 정보를 가져오고, 온도, 습도, 풍속 등을 시각화하는 대시보드를 만드세요."
         },
         {
             "name": "[중급-5] 음성 파형 분석기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "librosa를 사용하여 음성 파일을 업로드하고 파형, 스펙트로그램을 표시하며 기본적인 오디오 특성(주파수, 진폭)을 분석하는 앱을 만드세요."
         },
 
         # 고급 레벨 (10건) - 머신러닝/딥러닝 기초
         {
             "name": "[고급-1] 손글씨 숫자 인식기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "MNIST 데이터셋으로 학습된 CNN 모델을 사용하여 손으로 그린 숫자를 인식하는 앱을 만드세요. 캔버스에 그림을 그리면 실시간으로 예측합니다."
         },
         {
             "name": "[고급-2] 얼굴 감지기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "OpenCV와 dlib을 사용하여 이미지에서 얼굴을 감지하고 랜드마크를 표시하는 앱을 만드세요. 나이와 성별도 예측합니다."
         },
         {
             "name": "[고급-3] 텍스트 감성 분석기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "NLTK와 scikit-learn을 사용하여 텍스트의 감성(긍정/부정)을 분석하고 점수를 매기는 앱을 만드세요."
         },
         {
             "name": "[고급-4] 이미지 세그멘테이션",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "U-Net 모델을 사용하여 이미지의 객체를 분할하고 마스크를 생성하는 앱을 만드세요."
         },
         {
             "name": "[고급-5] 시계열 예측기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "Prophet을 사용하여 시계열 데이터를 분석하고 미래 값을 예측하는 앱을 만드세요. 계절성과 트렌드를 시각화합니다."
         },
         {
             "name": "[고급-6] 객체 탐지기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "YOLO 모델을 사용하여 이미지나 비디오에서 객체를 탐지하고 바운딩 박스를 그리는 앱을 만드세요."
         },
         {
             "name": "[고급-7] 음성 인식기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "DeepSpeech 모델을 사용하여 음성을 텍스트로 변환하는 앱을 만드세요. 실시간 음성 입력도 지원합니다."
         },
         {
             "name": "[고급-8] 이미지 스타일 변환",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "CycleGAN을 사용하여 이미지의 스타일을 다른 화풍으로 변환하는 앱을 만드세요."
         },
         {
             "name": "[고급-9] 포즈 추정기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "PoseNet을 사용하여 이미지나 비디오에서 사람의 포즈를 추정하고 관절을 표시하는 앱을 만드세요."
         },
         {
             "name": "[고급-10] 이상치 탐지기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "Isolation Forest를 사용하여 데이터셋에서 이상치를 탐지하고 시각화하는 앱을 만드세요."
         },
 
         # 응용 레벨 (20건) - 허깅페이스 모델 통합
         {
             "name": "[AI-1] 텍스트 요약기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "허깅페이스의 text-summarization 모델을 사용하여 긴 텍스트를 자동으로 요약하는 앱을 만드세요."
         },
         {
             "name": "[AI-2] 이미지 캡션 생성기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "Vit-GPT2-Image-Captioning 모델을 사용하여 이미지를 설명하는 캡션을 생성하는 앱을 만드세요."
         },
         {
             "name": "[AI-3] 질문 답변 시스템",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "BERT-QA 모델을 사용하여 주어�� 문맥에서 질문에 답변하는 앱을 만드세요."
         },
         {
             "name": "[AI-4] 감정 분석기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "RoBERTa 감정 분석 모델을 사용하여 텍스트의 감정을 분석하는 앱을 만드세요."
         },
         {
             "name": "[AI-5] 이미지 생성기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "Stable Diffusion 모델을 사용하여 텍스트 설명으로부터 이미지를 생성하는 앱을 만드세요."
         },
 
         {
             "name": "[AI-6] 음성 합성기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "Coqui TTS 모델을 사용하여 텍스트를 자연스러운 음성으로 변환하는 앱을 만드세요. 다양한 목소리와 감정 조절이 가능합니다."
         },
         {
             "name": "[AI-7] 코드 자동완성",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "CodeBERT 모델을 사용하여 프로그래밍 코드를 자동으로 완성하고 제안하는 앱을 만드세요."
         },
         {
             "name": "[AI-8] 이미지 복원기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "GFPGAN 모델을 사용하여 흐릿하거나 손상된 이미지, 특히 얼굴 사진을 복원하는 앱을 만드세요."
         },
         {
             "name": "[AI-9] 다국어 번역기",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "M2M100 모델을 사용하여 100개 이상의 언어 간 번역을 지원하는 앱을 만드세요."
         },
         {
             "name": "[AI-10] 문서 OCR",
-            "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),
+            "image_url": "data:image/png;base64," + get_image_base64('mouse.png'),   
             "prompt": "Donut-base 모델을 사용하여 문서 이미지에서 텍스트를 추출하고 구조화된 형식으로 변환하는 앱을 만드세요."
         },
         {