Update app.py

app.py

@@ -397,29 +397,26 @@ def update_session_list():
         print(f"Error updating session list: {e}")
         return gr.update(choices=[])
 
-def load_session_history(selected_session):
+# db.json 파일 읽기 함수 추가
+def load_json_data():
     try:
-        if not selected_session:
-            return gr.HTML("")
-            
-        session_id = selected_session.split(" (")[0] if " (" in selected_session else selected_session
-        
-        conn = sqlite3.connect('chat_history.db')
-        c = conn.cursor()
-        c.execute("""
-            SELECT prompt, response, timestamp 
-            FROM chat_history 
-            WHERE session_id = ? 
-            ORDER BY timestamp DESC
-        """, (session_id,))
-        history = c.fetchall()
-        conn.close()
+        with open('db.json', 'r', encoding='utf-8') as f:
+            return json.load(f)
+    except Exception as e:
+        print(f"Error loading db.json: {e}")
+        return []
 
+# 세션 히스토리 로드 함수 수정
+def load_session_history(selected_session=None):
+    try:
+        # db.json 데이터 로드
+        json_data = load_json_data()
+        
         html_content = """
         <style>
             .prompt-grid {
                 display: grid;
-                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+                grid-template-columns: repeat(3, 1fr);
                 gap: 20px;
                 padding: 20px;
             }
@@ -436,37 +433,43 @@ def load_session_history(selected_session):
                 transform: translateY(-2px);
                 box-shadow: 0 4px 10px rgba(0,0,0,0.15);
             }
-            .timestamp {
-                font-size: 0.8em;
+            .card-image {
+                width: 100%;
+                height: 200px;
+                object-fit: cover;
+                border-radius: 4px;
+                margin-bottom: 10px;
+            }
+            .card-name {
+                font-weight: bold;
+                margin-bottom: 8px;
+            }
+            .card-prompt {
+                font-size: 0.9em;
                 color: #666;
-                margin-top: 10px;
+                display: -webkit-box;
+                -webkit-line-clamp: 3;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
             }
         </style>
         """
 
-        # jQuery 추가
         html_content += """
         <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+        <div class="prompt-grid">
         """
 
-        html_content += """<div class="prompt-grid">"""
-
-        for i, (prompt, response, timestamp) in enumerate(history):
-            # 여기서 short_prompt를 올바르게 정의
-            short_prompt = prompt[:100] + "..." if len(prompt) > 100 else prompt
-            formatted_time = datetime.strptime(timestamp, '%Y-%m-%d %H:%M:%S.%f').strftime('%Y-%m-%d %H:%M')
-            
-            # HTML 이스케이프 처리
-            escaped_prompt = html.escape(prompt).replace('"', '&quot;')
-            escaped_response = html.escape(response).replace('"', '&quot;')
+        for item in json_data:
+            name = html.escape(item.get('name', ''))
+            image_url = html.escape(item.get('image_url', ''))
+            prompt = html.escape(item.get('prompt', ''))
             
             html_content += f"""
-            <div class="prompt-card" 
-                 data-prompt="{escaped_prompt}"
-                 data-response="{escaped_response}"
-                 onclick="handleCardClick(this)">
-                <div>{html.escape(short_prompt)}</div>
-                <div class="timestamp">{formatted_time}</div>
+            <div class="prompt-card" data-prompt="{prompt}" onclick="handleCardClick(this)">
+                <img src="{image_url}" class="card-image" alt="{name}">
+                <div class="card-name">{name}</div>
+                <div class="card-prompt">{prompt}</div>
             </div>
             """
 
@@ -474,69 +477,24 @@ def load_session_history(selected_session):
         </div>
         <script>
         function handleCardClick(card) {
-            console.log('Card clicked');
-            
-            // 프롬프트와 응답 데이터 가져오기
             const prompt = card.getAttribute('data-prompt');
-            const response = card.getAttribute('data-response');
-            
-            console.log('Prompt:', prompt);
-            console.log('Response:', response);
-            
-            // 텍스트 영역 찾기 및 업데이트
             const textarea = document.querySelector('textarea');
             if (textarea) {
-                console.log('Found textarea');
                 textarea.value = prompt;
                 
-                // 코드 추출
-                let code = response;
-                if (response.includes('```html')) {
-                    const match = response.match(/```html\\n([\\s\\S]*?)\\n```/);
-                    if (match) {
-                        code = match[1];
-                    }
-                }
-                
-                console.log('Extracted code:', code);
-                
-                // Base64 인코딩
-                const encodedHtml = btoa(unescape(encodeURIComponent(code.trim())));
-                const dataUri = `data:text/html;charset=utf-8;base64,${encodedHtml}`;
-                
-                // iframe 업데이트
-                const iframe = document.querySelector('.html_content iframe');
-                if (iframe) {
-                    console.log('Found iframe');
-                    iframe.src = dataUri;
-                }
-                
-                // Code 실행 버튼 찾기 및 클릭
                 setTimeout(() => {
                     const executeButton = $('button:contains("Code 실행")');
                     if (executeButton.length) {
-                        console.log('Found execute button');
                         executeButton[0].click();
-                    } else {
-                        console.log('Execute button not found');
                     }
                 }, 100);
                 
-                // 드로어 닫기
                 const drawer = document.querySelector('.session-drawer');
                 if (drawer) {
-                    console.log('Closing drawer');
                     drawer.style.display = 'none';
                 }
-            } else {
-                console.log('Textarea not found');
             }
         }
-        
-        // 페이지 로드 완료 후 실행
-        $(document).ready(function() {
-            console.log('Session history loaded');
-        });
         </script>
         """
         
@@ -620,39 +578,34 @@ with gr.Blocks(css_paths="app.css",theme=theme) as demo:
     with ms.Application() as app:
         with antd.ConfigProvider():
             # Drawer 컴포넌트들
+
+
+            
             with antd.Drawer(open=False, title="code", placement="left", width="750px") as code_drawer:
                 code_output = legacy.Markdown()
     
             with antd.Drawer(open=False, title="history", placement="left", width="900px") as history_drawer:
                 history_output = legacy.Chatbot(show_label=False, flushing=False, height=960, elem_classes="history_chatbot")
 
-    
+# 세션 관련 UI 수정
             with antd.Drawer(
                 open=False, 
-                title="Session History", 
+                title="Templates", 
                 placement="right",
                 width="900px",
                 elem_classes="session-drawer"
             ) as session_drawer:
                 with antd.Flex(vertical=True, gap="middle"):
-                    gr.Markdown("### Previous Sessions")
-                    session_list = gr.Dropdown(
-                        label="Select a session to view history",
-                        choices=[],
-                        elem_classes="session-list"
-                    )
-
                     session_history = gr.HTML(
                         elem_classes="session-history"
                     )
-                                 
-
                     close_btn = antd.Button(
                         "Close",
                         type="default",
                         elem_classes="close-btn"
                     )
 
+
 # 세션 드로어에서 카드 클릭 시 실행할 함수 (Drawer 컴포넌트들 다음에 위치)
             def execute_history_item(evt: gr.SelectData):  # gr.SelectData로 이벤트 데이터 받기
                 try:
@@ -681,12 +634,6 @@ with gr.Blocks(css_paths="app.css",theme=theme) as demo:
                 outputs=[session_history]
             )
 
-#            session_history.click(
-#                fn=execute_history_item,
-#                inputs=[],
-#                outputs=[input, sandbox, state_tab, session_drawer]
-#            )
-
             
             # 메인 컨텐츠를 위한 Row
             with antd.Row(gutter=[32, 12]) as layout:    
@@ -883,25 +830,24 @@ with gr.Blocks(css_paths="app.css",theme=theme) as demo:
                 outputs=[history_drawer]
             )
 
-            # 세션 관련 이벤트 핸들러들
+
+# 세션 버튼 클릭 이벤트 수정
             sessionBtn.click(
-                lambda: (gr.update(open=True), update_session_list()),
+                lambda: (gr.update(open=True), load_session_history()),
                 inputs=[],
-                outputs=[session_drawer, session_list]
+                outputs=[session_drawer, session_history]
             )
 
-# 세션 드로어 닫기 이벤트 수정
+# 세션 드로어 닫기 이벤트 수정  
             session_drawer.close(
-                lambda: (gr.update(open=False), gr.update(choices=[]), gr.HTML("")),
-                outputs=[session_drawer, session_list, session_history]
+                lambda: (gr.update(open=False), gr.HTML("")),
+                outputs=[session_drawer, session_history]
             )
 
             close_btn.click(
-                lambda: (gr.update(open=False), gr.update(choices=[]), gr.HTML("")),
-                outputs=[session_drawer, session_list, session_history]
-            )
-
-         
+                lambda: (gr.update(open=False), gr.HTML("")),
+                outputs=[session_drawer, session_history]
+            )         
 
 
             session_list.change(