Update app.py

app.py

@@ -304,27 +304,58 @@ def load_json_data():
             "name": "[컴포넌트] 이메일 회원가입 및 로그인",
             "image_url": "data:image/png;base64," + get_image_base64('login.png'),  # mouse.gif 사용
             "prompt": "이메일 회원가입 & 로그인 웹페이지를 만들어주세요. 다음 요구사항을 반영해주세요: 1. 디자인 - 모던하고 미니멀한 UI/UX - 반응형 레이아웃 - 부드러운 애니메이션 효과 - 적절한 폼 validation 피드백 2. 회원가입 기능 3. 로그인 기능 - 이메일/비밀번호 입력 - 자동로그인 기능 - 비밀번호 찾기 링크 - 로그인 실패시 에러 메시지 - 로그인 성공시 환영 메시지 "
-        },     
+        },   
         {
-            "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": "[게임] 테트리스 게임",
+            "image_url": "data:image/png;base64," + get_image_base64('127.png'),
+            "prompt": "고전 테트리스 게임을 만드세요. 스타트와 리스타트 버튼을 포함하세요. 테트리스의 규칙을 잘 따라야합니다."
+        },        
+    
         {
             "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": "[인터랙티브] 컬러 팔레트",
-            "image_url": "data:image/png;base64," + get_image_base64('113.png'),
-            "prompt": "마우스 움직임에 따라 동적으로 변하는 컬러 팔레트를 만드세요. 색상 선택, 저장, 조합 기능과 함께 부드러운 그라데이션 효과를 구현하세요."
+            "name": "[도구] 인터랙티브 스케쥴러",
+            "image_url": "data:image/png;base64," + get_image_base64('122.png'),
+            "prompt": "드래그 앤 드롭으로 일정을 관리할 수 있는 달력을 만드세요. 애니메이션 효과와 일정 필터링 기능을 추가하세요."
+        },
+        {
+            "name": "[게임] 타자 게임",
+            "image_url": "data:image/png;base64," + get_image_base64('123.png'),
+            "prompt": "떨어지는 단어를 타이핑하여 점수를 얻는 게임을 만드세요. 난이도 조절과 효과음을 추가하세요."
+        },
+        {
+            "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": "[3D] 지형 생성기",
+            "image_url": "data:image/png;base64," + get_image_base64('131.png'),
+            "prompt": "Three.js로 프로시저럴 지형을 생성하세요. 고도, 텍스처, 물 효과를 실시간으로 조정할 수 있게 만드세요."
         },
+        {
+            "name": "[3D] 텍스트 애니메이터",
+            "image_url": "data:image/png;base64," + get_image_base64('132.png'),
+            "prompt": "Three.js로 3D 텍스트 애니메이션을 만드세요. 다양한 변환 효과와 물리 기반 입자 효과를 구현하세요."
+        },        
         {
             "name": "[위젯] 날씨 애니메이션",
             "image_url": "data:image/png;base64," + get_image_base64('114.png'),
             "prompt": "현재 날씨 상태를 보여주는 애니메이션 위젯을 만드세요. 비, 눈, 구름, 번개 등의 날씨 효과를 Canvas로 구현하고 부드러운 전환 효과를 추가하세요."
         },
+       {
+            "name": "[시뮬레이션] 물리 엔진",
+            "image_url": "data:image/png;base64," + get_image_base64('125.png'),
+            "prompt": "Canvas를 사용하여 간단한 물리 시뮬레이션을 구현하세요. 중력, 충돌, 탄성 효과를 적용한 공 튀기기 시뮬레이션을 만드세요."
+        },
+        {
+            "name": "[오디오] 사운드 믹서",
+            "image_url": "data:image/png;base64," + get_image_base64('126.png'),
+            "prompt": "Web Audio API를 사용하여 여러 음원을 믹싱할 수 있는 인터페이스를 만드세요. 볼륨, 패닝, 이펙트 조절 기능을 구현하세요."
+        },        
         {
             "name": "[이펙트] 파티클 텍스트",
             "image_url": "data:image/png;base64," + get_image_base64('116.png'),
@@ -344,7 +375,7 @@ def load_json_data():
             "name": "[애니메이션] SVG 패스",
             "image_url": "data:image/png;base64," + get_image_base64('118.png'),
             "prompt": "SVG 패스를 따라 움직이는 애니메이션을 구현하세요. 다양한 도형이 그려지는 과정을 보여주고 인터랙티브한 컨트롤을 추가하세요."
-        },
+        }, #여기까지가 트렌드 12개 항목임
         {
             "name": "[도구] 드로잉 보드",
             "image_url": "data:image/png;base64," + get_image_base64('119.png'),
@@ -356,40 +387,18 @@ def load_json_data():
             "prompt": "숫자나 이미지를 사용한 슬라이드 퍼즐 게임을 만드세요. 이동 애니메이션과 완성 확인 기능을 추가하세요."
         },
         {
-            "name": "[이펙트] 파티클 커서",
-            "image_url": "data:image/png;base64," + get_image_base64('121.png'),
-            "prompt": "마우스 커서를 따라다니는 파티클 효과를 만드세요. 다양한 파티클 패턴과 색상 변화를 구현하세요."
-        },
-        {
-            "name": "[도구] 인터랙티브 스케쥴러",
-            "image_url": "data:image/png;base64," + get_image_base64('122.png'),
-            "prompt": "드래그 앤 드롭으로 일정을 관리할 수 있는 달력을 만드세요. 애니메이션 효과와 일정 필터링 기능을 추가하세요."
-        },
-        {
-            "name": "[게임] 타자 게임",
-            "image_url": "data:image/png;base64," + get_image_base64('123.png'),
-            "prompt": "떨어지는 단어를 타이핑하여 점수를 얻는 게임을 만드세요. 난이도 조절과 효과음을 추가하세요."
+            "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": "[시각화] 데이터 애니메이션",
             "image_url": "data:image/png;base64," + get_image_base64('124.png'),
             "prompt": "D3.js를 사용하여 데이터 변화를 애니메이션으로 보여주는 차트를 만드세요. 다양한 전환 효과를 추가하세요."
         },
-        {
-            "name": "[시뮬레이션] 물리 엔진",
-            "image_url": "data:image/png;base64," + get_image_base64('125.png'),
-            "prompt": "Canvas를 사용하여 간단한 물리 시뮬레이션을 구현하세요. 중력, 충돌, 탄성 효과를 적용한 공 튀기기 시뮬레이션을 만드세요."
-        },
-        {
-            "name": "[오디오] 사운드 믹서",
-            "image_url": "data:image/png;base64," + get_image_base64('126.png'),
-            "prompt": "Web Audio API를 사용하여 여러 음원을 믹싱할 수 있는 인터페이스를 만드세요. 볼륨, 패닝, 이펙트 조절 기능을 구현하세요."
-        },
-        {
-            "name": "[게임] 테트리스 게임",
-            "image_url": "data:image/png;base64," + get_image_base64('127.png'),
-            "prompt": "고전 테트리스 게임을 만드세요. 스타트와 리스타트 버튼을 포함하세요. 테트리스의 규칙을 잘 따라야합니다."
-        },
+ 
+
         {
             "name": "[컴포넌트] 게시판",
             "image_url": "data:image/png;base64," + get_image_base64('128.png'),
@@ -405,16 +414,8 @@ def load_json_data():
             "image_url": "data:image/png;base64," + get_image_base64('130.png'),
             "prompt": "D3.js를 사용하여 동적 마인드맵을 만드세요. 노드 추가/삭제, 드래그 앤 드롭, 확장/축소 애니메이션을 구현하세요."
         },
-        {
-            "name": "[3D] 지형 생성기",
-            "image_url": "data:image/png;base64," + get_image_base64('131.png'),
-            "prompt": "Three.js로 프로시저럴 지형을 생성하세요. 고도, 텍스처, 물 효과를 실시간으로 조정할 수 있게 만드세요."
-        },
-        {
-            "name": "[3D] 텍스트 애니메이터",
-            "image_url": "data:image/png;base64," + get_image_base64('132.png'),
-            "prompt": "Three.js로 3D 텍스트 애니메이션을 만드세요. 다양한 변환 효과와 물리 기반 입자 효과를 구현하세요."
-        },
+
+
         {
             "name": "[도구] 패턴 디자이너",
             "image_url": "data:image/png;base64," + get_image_base64('133.png'),
@@ -425,16 +426,22 @@ def load_json_data():
             "image_url": "data:image/png;base64," + get_image_base64('134.png'),
             "prompt": "WebRTC와 Canvas를 사용하여 실시간 비디오 필터 앱을 만드세요. 다양한 이미지 처리 효과를 구현하세요."
         },
-        {
-            "name": "[애니메이션] Interactive 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": "[시각화] 실시간 데이터 플로우",
             "image_url": "data:image/png;base64," + get_image_base64('136.png'),
             "prompt": "D3.js로 실시간 데이터 흐름을 시각화하세요. 노드 기반 데이터 처리와 애니메이션 효과를 구현하세요."
-        },    
+        },   
+        {
+            "name": "[인터랙티브] 컬러 팔레트",
+            "image_url": "data:image/png;base64," + get_image_base64('113.png'),
+            "prompt": "마우스 움직임에 따라 동적으로 변하는 컬러 팔레트를 만드세요. 색상 선택, 저장, 조합 기능과 함께 부드러운 그라데이션 효과를 구현하세요."
+        },   
+        {
+            "name": "[이펙트] 파티클 커서",
+            "image_url": "data:image/png;base64," + get_image_base64('121.png'),
+            "prompt": "마우스 커서를 따라다니는 파티클 효과를 만드세요. 다양한 파티클 패턴과 색상 변화를 구현하세요."
+        },            
         {
             "name": "테스트",
             "image_url": "data:image/gif;base64," + get_image_base64('mouse.gif'),  # mouse.gif 사용