Update app.py

app.py

@@ -245,47 +245,185 @@ def load_json_data():
     # 하드코딩된 데이터 반환
     return [
         {
-            "name": "MBTI 진단 서비스",
+            "name": "[심리] MBTI 진단 서비스",
             "image_url": "data:image/png;base64," + get_image_base64('mbti.png'),  # mbti.png 사용
             "prompt": "MBTI 진단을 위해 15개의 질문과 객관식 답변을 통해 MBTI 진단 결과 및 해당 성격에 대한 상세한 결과를 출력하라"
         },        
         {
-            "name": "투자 포트폴리오 대시보드",
+            "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": "체스 게임",
+            "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": "타로카드 운세",
+            "name": "[게임] 벽돌깨기 게임",
+            "image_url": "data:image/png;base64," + get_image_base64('alcaroid.png'),  # mouse.gif 사용
+            "prompt": "벽돌깨기 게임"
+        },        
+        {
+            "name": "[Fun] 타로카드 운세",
             "image_url": "data:image/png;base64," + get_image_base64('tarot.png'),  # mouse.gif 사용
             "prompt": "타로카드 운세를 점치는것을 생성하라. 아주 상세하고 전문적이면서 쉽고 길게 답변하라. 모든 답변과 설명은 한글로 하라"
         },
-
         {
-            "name": "텍스트로 음성 생성 및 조정",
+            "name": "[Fun] 행운의 룰렛",
+            "image_url": "data:image/png;base64," + get_image_base64('roolet.png'),  # mouse.gif 사용
+            "prompt": "행운의 원형 룰렛이 빠르게 돌아가고, 마우스로 화살 발사 버튼 누르면 룰렛의 번호에 랜덤하게 맞는다. 각 번호에 상금이 '꽝' ~ '100만원' 까지 랜덤하게 배치되어 있다. shoot 선택된 번호에 따라 해당 번호에 배치된 상금 액수도 출력하라"
+        },     
+        {
+            "name": "[멀티모달] 텍스트로 음성 생성 및 조정",
             "image_url": "data:image/png;base64," + get_image_base64('tts.png'),  # mouse.gif 사용
             "prompt": "텍스트를 음성으로 변환하고, 음성 파라미터를 실시간으로 조정할 수 있는 인터페이스를 제공하세요."
         },
         {
-            "name": "3D 분자 시뮬레이션",
+            "name": "[학습] 3D 분자 시뮬레이션",
             "image_url": "data:image/png;base64," + get_image_base64('3ds.png'),  # mouse.gif 사용
             "prompt": "Three.js로 3D 분자 구조(주요 분자들을 선택할 수 있게)를 시각화하세요. 회전, 줌, 원자 정보 표시 기능과 애니메이션 효과를 구현하세요."
+        },   
+        {
+            "name": "[컴포넌트] 이메일 회원가입 및 로그인",
+            "image_url": "data:image/png;base64," + get_image_base64('login.png'),  # mouse.gif 사용
+            "prompt": "이메일 회원가입 & 로그인 웹페이지를 만들어주세요. 다음 요구사항을 반영해주세요: 1. 디자인 - 모던하고 미니멀한 UI/UX - 반응형 레이아웃 - 부드러운 애니메이션 효과 - 적절한 폼 validation 피드백 2. 회원가입 기능 3. 로그인 기능 - 이메일/비밀번호 입력 - 자동로그인 기능 - 비밀번호 찾기 링크 - 로그인 실패시 에러 메시지 - 로그인 성공시 환영 메시지 "
+        },     
+        {
+            "name": "[애니메이션] Interactive Timeline",
+            "image_url": "data:image/png;base64," + get_image_base64('timeline.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": "행운의 룰렛",
-            "image_url": "data:image/png;base64," + get_image_base64('roolet.png'),  # mouse.gif 사용
-            "prompt": "행운의 원형 룰렛이 빠르게 돌아가고, 마우스로 화살 발사 버튼 누르면 룰렛의 번호에 랜덤하게 맞는다. 각 번호에 상금이 '꽝' ~ '100만원' 까지 랜덤하게 배치되어 있다. shoot 선택된 번호에 따라 해당 번호에 배치된 상금 액수도 출력하라"
-        },        
-        
+            "name": "[게임] 카드 기억 게임", 
+            "image_url": "data:image/png;base64," + get_image_base64('memory.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."
+        },
         {
-            "name": "벽돌깨기 게임",
-            "image_url": "data:image/png;base64," + get_image_base64('alcaroid.png'),  # mouse.gif 사용
-            "prompt": "벽돌깨기 게임"
+            "name": "[인터랙티브] 컬러 팔레트",
+            "image_url": "data:image/png;base64," + get_image_base64('palette.png'),
+            "prompt": "마우스 움직임에 따라 동적으로 변하는 컬러 팔레트를 만드세요. 색상 선택, 저장, 조합 기능과 함께 부드러운 그라데이션 효과를 구현하세요."
+        },
+        {
+            "name": "[위젯] 날씨 애니메이션",
+            "image_url": "data:image/png;base64," + get_image_base64('weather.png'),
+            "prompt": "현재 날씨 상태를 보여주는 애니메이션 위젯을 만드세요. 비, 눈, 구름, 번개 등의 날씨 효과를 Canvas로 구현하고 부드러운 전환 효과를 추가하세요."
+        },
+        {
+            "name": "[이펙트] 파티클 텍스트",
+            "image_url": "data:image/png;base64," + get_image_base64('particle.png'),
+            "prompt": "텍스트가 파티클로 변환되는 효과를 구현하세요. 마우스 호버시 글자가 흩어졌다가 다시 모이는 애니메이션을 Canvas로 만드세요."
+        },
+        {
+            "name": "[3D] 책장 갤러리",
+            "image_url": "data:image/png;base64," + get_image_base64('bookshelf.png'),
+            "prompt": "CSS 3D 변환을 사용하여 회전하는 책장 형태의 갤러리를 만드세요. 각 책을 클릭하면 상세 정보가 나타나도록 구현하세요."
+        },
+        {
+            "name": "[게임] 리듬 게임",
+            "image_url": "data:image/png;base64," + get_image_base64('rhythm.png'),
+            "prompt": "Web Audio API를 활용한 간단한 리듬 게임을 만드세요. 떨어지는 노트와 타이밍 판정, 점수 시스템을 구현하세요."
+        },
+        {
+            "name": "[애니메이션] SVG 패스",
+            "image_url": "data:image/png;base64," + get_image_base64('svg.png'),
+            "prompt": "SVG 패스를 따라 움직이는 애니메이션을 구현하세요. 다양한 도형이 그려지는 과정을 보여주고 인터랙티브한 컨트롤을 추가하세요."
+        },
+        {
+            "name": "[도구] 드로잉 보드",
+            "image_url": "data:image/png;base64," + get_image_base64('drawing.png'),
+            "prompt": "Canvas를 사용한 그리기 도구를 만드세요. 브러시 크기, 색상 변경, 지우개 기능과 그리기 기록 저장 기능을 구현하세요."
+        },
+        {
+            "name": "[게임] 퍼즐 슬라이드",
+            "image_url": "data:image/png;base64," + get_image_base64('puzzle.png'),
+            "prompt": "숫자나 이미지를 사용한 슬라이드 퍼즐 게임을 만드세요. 이동 애니메이션과 완성 확인 기능을 추가하세요."
+        },
+        {
+            "name": "[이펙트] 파티클 커서",
+            "image_url": "data:image/png;base64," + get_image_base64('cursor.png'),
+            "prompt": "마우스 커서를 따라다니는 파티클 효과를 만드세요. 다양한 파티클 패턴과 색상 변화를 구현하세요."
+        },
+        {
+            "name": "[도구] 인터랙티브 달력",
+            "image_url": "data:image/png;base64," + get_image_base64('calendar.png'),
+            "prompt": "드래그 앤 드롭으로 일정을 관리할 수 있는 달력을 만드세요. 애니메이션 효과와 일정 필터링 기능을 추가하세요."
+        },
+        {
+            "name": "[게임] 타자 게임",
+            "image_url": "data:image/png;base64," + get_image_base64('typing.png'),
+            "prompt": "떨어지는 단어를 타이핑하여 점수를 얻는 게임을 만드세요. 난이도 조절과 효과음을 추가하세요."
+        },
+        {
+            "name": "[시각화] 데이터 애니메이션",
+            "image_url": "data:image/png;base64," + get_image_base64('datavis.png'),
+            "prompt": "D3.js를 사용하여 데이터 변화를 애니메이션으로 보여주는 차트를 만드세요. 다양한 전환 효과를 추가하세요."
+        },
+        {
+            "name": "[시뮬레이션] 물리 엔진",
+            "image_url": "data:image/png;base64," + get_image_base64('physics.png'),
+            "prompt": "Canvas를 사용하여 간단한 물리 시뮬레이션을 구현하세요. 중력, 충돌, 탄성 효과를 적용한 공 튀기기 시뮬레이션을 만드세요."
+        },
+        {
+            "name": "[오디오] 사운드 믹서",
+            "image_url": "data:image/png;base64," + get_image_base64('mixer.png'),
+            "prompt": "Web Audio API를 사용하여 여러 음원을 믹싱할 수 있는 인터페이스를 만드세요. 볼륨, 패닝, 이펙트 조절 기능을 구현하세요."
+        },
+        {
+            "name": "[3D] 카드 갤러리",
+            "image_url": "data:image/png;base64," + get_image_base64('3dcards.png'),
+            "prompt": "Three.js를 사용하여 3D 공간에서 회전하는 카드 갤러리를 만드세요. 마우스 인터랙션과 애니메이션을 추가하세요."
+        },
+        {
+            "name": "[시각화] 인터랙티브 맵",
+            "image_url": "data:image/png;base64," + get_image_base64('map.png'),
+            "prompt": "SVG를 사용하여 인터랙티브한 지도를 만드세요. 지역 선택, 데이터 시각화, 줌 기능을 구현하세요."
+        },
+        {
+            "name": "[도구] 포토 에디터",
+            "image_url": "data:image/png;base64," + get_image_base64('photoeditor.png'),
+            "prompt": "Canvas를 사용하여 기본적인 이미지 편집 도구를 만드세요. 필터 적용, 자르기, 회전 기능을 구현하세요."
+        },
+        {
+            "name": "[시각화] 마인드맵",
+            "image_url": "data:image/png;base64," + get_image_base64('mindmap.png'),
+            "prompt": "D3.js를 사용하여 동적 마인드맵을 만드세요. 노드 추가/삭제, 드래그 앤 드롭, 확장/축소 애니메이션을 구현하세요."
+        },
+        {
+            "name": "[3D] 지형 생성기",
+            "image_url": "data:image/png;base64," + get_image_base64('terrain.png'),
+            "prompt": "Three.js로 프로시저럴 지형을 생성하세요. 고도, 텍스처, 물 효과를 실시간으로 조정할 수 있게 만드세요."
+        },
+        {
+            "name": "[3D] 텍스트 애니메이터",
+            "image_url": "data:image/png;base64," + get_image_base64('3dtext.png'),
+            "prompt": "Three.js로 3D 텍스트 애니메이션을 만드세요. 다양한 변환 효과와 물리 기반 입자 효과를 구현하세요."
+        },
+        {
+            "name": "[도구] 패턴 디자이너",
+            "image_url": "data:image/png;base64," + get_image_base64('pattern.png'),
+            "prompt": "SVG로 반복 패턴을 디자인하는 도구를 만드세요. 대칭 옵션, 색상 스키마 관리, 실시간 프리뷰를 구현하세요."
+        },
+        {
+            "name": "[멀티미디어] 실시간 필터 카메라",
+            "image_url": "data:image/png;base64," + get_image_base64('camera.png'),
+            "prompt": "WebRTC와 Canvas를 사용하여 실시간 비디오 필터 앱을 만드세요. 다양한 이미지 처리 효과를 구현하세요."
+        },
+        {
+            "name": "[애니메이션] Interactive Stars",
+            "image_url": "data:image/png;base64," + get_image_base64('stars.png'),
+            "prompt": "Interactive Stars: Watch stars and constellations appear in the night sky as you move your mouse."
         },
+        {
+            "name": "[시각화] 실시간 데이터 플로우",
+            "image_url": "data:image/png;base64," + get_image_base64('dataflow.png'),
+            "prompt": "D3.js로 실시간 데이터 흐름을 시각화하세요. 노드 기반 데이터 처리와 애니메이션 효과를 구현하세요."
+        },    
         {
             "name": "테스트",
             "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),  # mouse.gif 사용