Update app.py

app.py

@@ -566,173 +566,7 @@ def get_random_placeholder():
 def update_placeholder():
     return gr.update(placeholder=get_random_placeholder())
 
-custom_css = """
-     /* 전체 컨테이너 스타일링 */
-     .main-tabs {
-          background: #ffffff;
-          border-radius: 15px;
-          box-shadow: 0 4px 20px rgba(0,0,0,0.1);
-          padding: 20px;
-          margin: 20px;
-     }
-
-     /* 좌측 패널 스타일링 */
-     .left-panel {
-          background: #f8f9fa;
-          border-radius: 12px;
-          padding: 20px;
-          margin: 10px;
-          box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-     }
-
-     /* 우측 패널 스타일링 */
-     .right-panel {
-          background: #ffffff;
-          border-radius: 12px;
-          padding: 20px;
-          margin: 10px;
-          box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-     }
-
-     /* 입력 영역 스타일링 */
-     .custom-textarea {
-          background: #ffffff !important;
-          border: 1px solid #e0e0e0 !important;
-          border-radius: 10px !important;
-          padding: 15px !important;
-          min-height: 150px !important;
-          font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
-          margin-bottom: 20px !important;
-     }
-
-     .custom-textarea:focus {
-          border-color: #007aff !important;
-          box-shadow: 0 0 0 2px rgba(0,122,255,0.2) !important;
-     }
-
-     /* 버튼 스타일링 */
-     .generate-btn {
-          background: #007aff !important;
-          color: white !important;
-          border-radius: 8px !important;
-          padding: 10px 20px !important;
-          font-weight: 500 !important;
-          transition: all 0.3s ease !important;
-          border: none !important;
-          box-shadow: 0 2px 4px rgba(0,122,255,0.2) !important;
-     }
 
-     .enhance-btn, .share-btn {
-          background: white !important;
-          border-radius: 8px !important;
-          padding: 10px 20px !important;
-          font-weight: 500 !important;
-          transition: all 0.3s ease !important;
-     }
-
-     .enhance-btn {
-          color: #007aff !important;
-          border: 1px solid #007aff !important;
-     }
-
-     .share-btn {
-          color: #28c840 !important;
-          border: 1px solid #28c840 !important;
-     }
-
-     /* 버튼 호버 효과 */
-     .generate-btn:hover {
-          background: #0056b3 !important;
-          transform: translateY(-1px);
-     }
-
-     .enhance-btn:hover {
-          background: rgba(0,122,255,0.1) !important;
-          transform: translateY(-1px);
-     }
-
-     .share-btn:hover {
-          background: rgba(40,200,64,0.1) !important;
-          transform: translateY(-1px);
-     }
-
-     /* 모드 선택기 스타일링 */
-     .mode-selector {
-          background: white !important;
-          padding: 15px !important;
-          border-radius: 10px !important;
-          margin-bottom: 20px !important;
-          box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
-     }
-
-     /* 미리보기 창 스타일링 */
-     .window-frame {
-          background: white;
-          border-radius: 10px;
-          overflow: hidden;
-          box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-     }
-
-     .window-header {
-          background: #f8f9fa;
-          padding: 10px 15px;
-          border-bottom: 1px solid #e0e0e0;
-          display: flex;
-          align-items: center;
-     }
-
-     .window-controls {
-          display: flex;
-          gap: 8px;
-     }
-
-     .control {
-          width: 12px;
-          height: 12px;
-          border-radius: 50%;
-     }
-
-     .close { background: #ff5f57; }
-     .minimize { background: #febc2e; }
-     .maximize { background: #28c840; }
-
-     /* 결과 영역 스타일링 */
-     .html_content {
-          background: white;
-          border-radius: 10px;
-          padding: 20px;
-          margin-top: 15px;
-          min-height: 400px;
-     }
-
-     /* 로딩 상태 스타일링 */
-     .right_content {
-          padding: 40px;
-          text-align: center;
-     }
-
-     /* 에러 상태 스타일링 */
-     .error-content {
-          background: #fff2f0;
-          border: 1px solid #ff4d4f;
-          padding: 20px;
-          border-radius: 8px;
-          margin-top: 15px;
-     }
-
-     /* 반응형 디자인 */
-     @media (max-width: 768px) {
-          .main-tabs {
-               margin: 10px;
-               padding: 10px;
-          }
-
-          .left-panel, .right-panel {
-               margin: 5px;
-               padding: 10px;
-          }
-     }
-"""
 
 def create_main_interface():
      """메인 인터페이스 생성 함수"""
@@ -853,160 +687,289 @@ The response should be in HTML format with appropriate styling."""
      with open('app.css', 'r', encoding='utf-8') as f:
           custom_css = f.read()
 
-     #NEW - 검색 결과 스타일 추가
-     custom_css += """
-          .search-summary {
-               margin: 20px 0;
-               padding: 20px;
-               background: #f8f9fa;
-               border-radius: 10px;
-          }
+     custom_css = """
+     /* 전체 컨테이너 */
+     .container {
+          max-width: 1400px;
+          margin: 0 auto;
+          padding: 20px;
+     }
 
-          .search-item {
-               margin-bottom: 15px;
-               padding: 15px;
-               border-left: 4px solid #007aff;
-               background: white;
-               border-radius: 4px;
-          }
+     /* 메인 레이아웃 */
+     .main-tabs {
+          display: flex;
+          gap: 30px;
+          min-height: 90vh;
+          background: #f5f7fa;
+          border-radius: 20px;
+          padding: 30px;
+          box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+     }
 
-          .search-item h3 {
-               margin: 0 0 10px 0;
-               color: #1a0dab;
-          }
+     /* 좌측 패널 */
+     .left-panel {
+          flex: 1;
+          background: white;
+          border-radius: 15px;
+          padding: 25px;
+          box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+          display: flex;
+          flex-direction: column;
+          gap: 20px;
+     }
 
-          .search-item a {
-               color: inherit;
-               text-decoration: none;
-          }
+     /* 우측 패널 */
+     .right-panel {
+          flex: 2;
+          background: white;
+          border-radius: 15px;
+          padding: 25px;
+          box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+     }
 
-          .search-item p {
-               margin: 0;
-               color: #4d5156;
-               font-size: 14px;
-               line-height: 1.5;
-          }
+     /* 모드 선택기 */
+     .mode-selector {
+          background: #f8f9fa;
+          padding: 20px;
+          border-radius: 12px;
+          border: 1px solid #e0e5ec;
+     }
 
-          .empty-content {
-               padding: 40px !important;
-               background: #f8f9fa !important;
-               border-radius: 10px !important;
-               margin: 20px !important;
-          }    
-     
-          .container {
-               background: #f0f0f0;
-               min-height: 100vh;
-               padding: 20px;
-               display: flex;
-               justify-content: center;
-               align-items: center;
-               font-family: -apple-system, BlinkMacSystemFont, sans-serif;
-          }
+     /* 입력 영역 */
+     .input-area {
+          display: flex;
+          flex-direction: column;
+          gap: 15px;
+     }
 
-          .mode-selector {
-               margin-bottom: 15px;
-               padding: 10px;
-               border-radius: 8px;
-               background: #f8f9fa;
-          }
+     .custom-textarea {
+          min-height: 200px !important;
+          padding: 20px !important;
+          border: 2px solid #e0e5ec !important;
+          border-radius: 12px !important;
+          font-size: 16px !important;
+          line-height: 1.6 !important;
+          resize: vertical !important;
+          transition: all 0.3s ease !important;
+     }
 
-          .error-content {
-               padding: 20px;
-               background: #fff2f0;
-               border-radius: 8px;
-               border: 1px solid #ff4d4f;
-          }
+     .custom-textarea:focus {
+          border-color: #007aff !important;
+          box-shadow: 0 0 0 3px rgba(0,122,255,0.1) !important;
+     }
+
+     /* 버튼 그룹 */
+     .button-group {
+          display: flex;
+          gap: 12px;
+          margin-top: 20px;
+     }
+
+     .generate-btn {
+          background: linear-gradient(45deg, #007aff, #00a2ff) !important;
+          color: white !important;
+          padding: 12px 24px !important;
+          border-radius: 10px !important;
+          font-weight: 600 !important;
+          border: none !important;
+          box-shadow: 0 4px 15px rgba(0,122,255,0.3) !important;
+          transition: all 0.3s ease !important;
+     }
+
+     .enhance-btn {
+          background: white !important;
+          color: #007aff !important;
+          padding: 12px 24px !important;
+          border-radius: 10px !important;
+          font-weight: 600 !important;
+          border: 2px solid #007aff !important;
+          transition: all 0.3s ease !important;
+     }
+
+     .share-btn {
+          background: white !important;
+          color: #28c840 !important;
+          padding: 12px 24px !important;
+          border-radius: 10px !important;
+          font-weight: 600 !important;
+          border: 2px solid #28c840 !important;
+          transition: all 0.3s ease !important;
+     }
+
+     /* 버튼 호버 효과 */
+     .generate-btn:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 6px 20px rgba(0,122,255,0.4) !important;
+     }
+
+     .enhance-btn:hover {
+          background: rgba(0,122,255,0.1) !important;
+          transform: translateY(-2px);
+     }
+
+     .share-btn:hover {
+          background: rgba(40,200,64,0.1) !important;
+          transform: translateY(-2px);
+     }
+
+     /* 프리뷰 영역 */
+     .preview-container {
+          background: white;
+          border-radius: 15px;
+          overflow: hidden;
+     }
+
+     .preview-header {
+          background: #f8f9fa;
+          padding: 15px;
+          border-bottom: 1px solid #e0e5ec;
+          display: flex;
+          align-items: center;
+          gap: 15px;
+     }
+
+     .window-controls {
+          display: flex;
+          gap: 8px;
+     }
+
+     .control {
+          width: 12px;
+          height: 12px;
+          border-radius: 50%;
+          transition: all 0.3s ease;
+     }
+
+     .close { background: #ff5f57; }
+     .minimize { background: #febc2e; }
+     .maximize { background: #28c840; }
 
-          .search-mode-active {
-               background-color: rgba(66,133,244,0.1);
+     .preview-content {
+          padding: 25px;
+          min-height: 500px;
+     }
+
+     /* 결과 영역 */
+     .result-area {
+          background: #f8f9fa;
+          border-radius: 12px;
+          padding: 20px;
+          margin-top: 20px;
+     }
+
+     /* 로딩 상태 */
+     .loading-container {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 40px;
+          gap: 20px;
+     }
+
+     /* 반응형 디자인 */
+     @media (max-width: 1200px) {
+          .main-tabs {
+               flex-direction: column;
           }
+          
+          .left-panel, .right-panel {
+               width: 100%;
+          }
+     }
      """
-     demo = gr.Blocks(css=custom_css, theme=theme)
 
+     demo = gr.Blocks(css=custom_css, theme=theme)
 
      with demo:
-          with gr.Row():  # 전체를 감싸는 Row 추가
-               # 좌측 패널
-               with gr.Column(scale=1, elem_classes="left-panel"):
-                    mode = gr.Radio(
-                         choices=["Generate", "Generate + Web Search"],
-                         label="Mode",
-                         value="Generate",
-                         info="Select 'Generate + Web Search' to include web search results",
-                         elem_classes="mode-selector"
-                    )
-
-                    input = gr.Textbox(
-                         label="Input",
-                         placeholder=get_random_placeholder(),
-                         lines=5,
-                         elem_classes="custom-textarea"
-                    )
-
-                    with gr.Row():
-                         btn = gr.Button("Generate", elem_classes="generate-btn")
-                         boost_btn = gr.Button("Enhance", elem_classes="enhance-btn")
-                         deploy_btn = gr.Button("Share", elem_classes="share-btn")
-
-                    deploy_result = gr.HTML(label="Share Result", elem_classes="deploy-result")
-
-               # 우측 패널
-               with gr.Column(scale=2, elem_classes="right-panel"):
-                    with gr.Group():  # Box 대신 Group 사용
-                         gr.HTML("""
-                              <div class="window-frame">
-                                   <div class="window-header">
+          with gr.Row(elem_classes="container"):
+               with gr.Column(elem_classes="main-tabs"):
+                    # 좌측 패널
+                    with gr.Column(scale=1, elem_classes="left-panel"):
+                         mode = gr.Radio(
+                              choices=["Generate", "Generate + Web Search"],
+                              label="Mode",
+                              value="Generate",
+                              info="Select mode for content generation",
+                              elem_classes="mode-selector"
+                         )
+
+                         with gr.Column(elem_classes="input-area"):
+                              input = gr.Textbox(
+                                   label="Enter your prompt",
+                                   placeholder="Type your request here...",
+                                   lines=8,
+                                   elem_classes="custom-textarea"
+                              )
+
+                              with gr.Row(elem_classes="button-group"):
+                                   btn = gr.Button("Generate", elem_classes="generate-btn")
+                                   boost_btn = gr.Button("Enhance", elem_classes="enhance-btn")
+                                   deploy_btn = gr.Button("Share", elem_classes="share-btn")
+
+                         deploy_result = gr.HTML(
+                              label="Share Result",
+                              elem_classes="result-area"
+                         )
+
+                    # 우측 패널
+                    with gr.Column(scale=2, elem_classes="right-panel"):
+                         with gr.Column(elem_classes="preview-container"):
+                              gr.HTML("""
+                                   <div class="preview-header">
                                         <div class="window-controls">
                                              <div class="control close"></div>
                                              <div class="control minimize"></div>
                                              <div class="control maximize"></div>
                                         </div>
-                                        <div class="window-title">Preview</div>
+                                        <div>Preview</div>
                                    </div>
-                              </div>
-                         """)
-                         
-                         # 결과 표시 영역
-                         with gr.Tabs(selected="empty") as state_tab:
-                              with gr.Tab("empty"):
-                                   gr.Markdown("Enter your question to begin")
-                              with gr.Tab("loading"):
-                                   gr.Markdown("Creating visual presentation...")
-                              with gr.Tab("render"):
-                                   sandbox = gr.HTML(elem_classes="html_content")
-                              with gr.Tab("error"):
-                                   gr.Markdown("An error occurred. Please try again.")
+                              """)
+
+                              with gr.Tabs() as state_tab:
+                                   with gr.Tab("empty"):
+                                        gr.Markdown("Enter your prompt to begin", elem_classes="preview-content")
+                                   with gr.Tab("loading"):
+                                        with gr.Column(elem_classes="loading-container"):
+                                             gr.Markdown("Creating visual presentation...")
+                                   with gr.Tab("render"):
+                                        sandbox = gr.HTML(elem_classes="preview-content")
+                                   with gr.Tab("error"):
+                                        gr.Markdown("An error occurred. Please try again.", elem_classes="preview-content")
 
           # 상태 변수들
           setting = gr.State({"system": SystemPrompt})
           search_mode = gr.State(False)
           code_output = gr.State("")
 
-          # Drawer 컴포넌트
-          with gr.Group() as code_drawer:  # Box 대신 Group 사용
-               gr.HTML("""
-                    <div class="thinking-container">
-                         <!-- thinking container content -->
-                    </div>
-               """)
-
-          # 이벤트 핸들러 연결
-          mode.change(fn=lambda x: x == "Generate + Web Search",
-                    inputs=[mode],
-                    outputs=[search_mode])
-
-          btn.click(fn=handle_generation,
-                    inputs=[input, setting, search_mode],
-                    outputs=[code_output, sandbox, state_tab, code_drawer])
-
-          boost_btn.click(fn=handle_boost,
-                         inputs=[input],
-                         outputs=[input, state_tab])
-
-          deploy_btn.click(fn=lambda code: deploy_to_vercel(remove_code_block(code)) if code else "No code to share.",
-                         inputs=[code_output],
-                         outputs=[deploy_result])
+          # 이벤트 핸들러
+          mode.change(
+               fn=lambda x: x == "Generate + Web Search",
+               inputs=[mode],
+               outputs=[search_mode]
+          )
+
+          btn.click(
+               fn=handle_generation,
+               inputs=[input, setting, search_mode],
+               outputs=[code_output, sandbox, state_tab, code_drawer]
+          ).then(
+               fn=update_placeholder,
+               inputs=[],
+               outputs=[input]
+          )
+
+          boost_btn.click(
+               fn=handle_boost,
+               inputs=[input],
+               outputs=[input, state_tab]
+          )
+
+          deploy_btn.click(
+               fn=lambda code: deploy_to_vercel(remove_code_block(code)) if code else "No code to share.",
+               inputs=[code_output],
+               outputs=[deploy_result]
+          )
 
      return demo