Hugging Face's logo

Spaces:
VIDraft
/
mouse-Visual-Chat
Running on Zero

App Files Community
openfree commited on
Commit
9c6e21f
·
verified ·
1 Parent(s): 3764c21

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +78 -368
app.py CHANGED
@@ -759,377 +759,87 @@ The response should be in HTML format with appropriate styling."""
759
  demo = gr.Blocks(css=custom_css, theme=theme)
760
 
761
  with demo:
762
- with gr.Tabs(elem_classes="main-tabs") as tabs:
763
- with gr.Tab("Visual AI Assistant", elem_id="mouse-tab", elem_classes="mouse-tab"):
764
- setting = gr.State({
765
- "system": SystemPrompt,
766
- })
767
-
768
- search_mode = gr.State(False)
769
- code_output = gr.State("")
770
-
771
- # 전체 레이아웃을 위한 Row 추가
 
 
 
 
 
 
 
 
772
  with gr.Row():
773
- # 좌측 패널
774
- with gr.Column(scale=1):
775
- with ms.Application() as app:
776
- with antd.ConfigProvider():
777
- with gr.Row():
778
- mode = gr.Radio(
779
- choices=["Generate", "Generate + Web Search"],
780
- label="Mode",
781
- value="Generate",
782
- info="Select 'Generate + Web Search' to include web search results",
783
- elem_classes="mode-selector"
784
- )
785
-
786
- # 입력 영역
787
- input = antd.InputTextarea(
788
- size="large",
789
- allow_clear=True,
790
- placeholder=get_random_placeholder(),
791
- elem_classes="custom-textarea"
792
- )
793
-
794
- # 버튼 그룹
795
- with antd.Flex(gap="small", justify="flex-start"):
796
- btn = antd.Button(
797
- "Generate",
798
- type="primary",
799
- size="large",
800
- elem_classes="generate-btn"
801
- )
802
- boost_btn = antd.Button(
803
- "Enhance",
804
- type="default",
805
- size="large",
806
- elem_classes="enhance-btn"
807
- )
808
- deploy_btn = antd.Button(
809
- "Share",
810
- type="default",
811
- size="large",
812
- elem_classes="share-btn"
813
- )
814
-
815
- deploy_result = gr.HTML(
816
- label="Share Result",
817
- elem_classes="deploy-result"
818
- )
819
-
820
- # 우측 패널
821
- with gr.Column(scale=2):
822
- with ms.Div(elem_classes="right_panel"):
823
- gr.HTML("""
824
- <div class="window-frame">
825
- <div class="window-header">
826
- <div class="window-controls">
827
- <div class="control close"></div>
828
- <div class="control minimize"></div>
829
- <div class="control maximize"></div>
830
- </div>
831
- <div class="window-title">Preview</div>
832
- </div>
833
- </div>
834
- """)
835
-
836
- with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
837
- with antd.Tabs.Item(key="empty"):
838
- empty = antd.Empty(
839
- description="Enter your question to begin",
840
- elem_classes="right_content empty-content"
841
- )
842
-
843
- with antd.Tabs.Item(key="loading"):
844
- loading = antd.Spin(
845
- True,
846
- tip="Creating visual presentation...",
847
- size="large",
848
- elem_classes="right_content"
849
- )
850
-
851
- with antd.Tabs.Item(key="render"):
852
- sandbox = gr.HTML(elem_classes="html_content")
853
-
854
- with antd.Tabs.Item(key="error"):
855
- error = antd.Empty(
856
- description="An error occurred. Please try again.",
857
- elem_classes="right_content error-content"
858
- )
859
-
860
-
861
-
862
-
863
-
864
- with antd.Drawer(open=False, title="AI is Creating...", placement="left", width="750px") as code_drawer:
865
- gr.HTML("""
866
- <div class="thinking-container">
867
- <style>
868
- .custom-textarea {
869
- background: #f8f9fa !important;
870
- border: 1px solid #e0e0e0 !important;
871
- border-radius: 10px !important;
872
- padding: 15px !important;
873
- min-height: 150px !important;
874
- font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
875
- }
876
-
877
- .custom-textarea:focus {
878
- border-color: #007aff !important;
879
- box-shadow: 0 0 0 2px rgba(0,122,255,0.2) !important;
880
- }
881
-
882
- .thinking-container {
883
- text-align: center;
884
- padding: 20px;
885
- background: #f8f9fa;
886
- border-radius: 15px;
887
- font-family: -apple-system, BlinkMacSystemFont, sans-serif;
888
- }
889
-
890
- .progress-bar {
891
- width: 100%;
892
- height: 4px;
893
- background: #e9ecef;
894
- border-radius: 4px;
895
- margin: 20px 0;
896
- overflow: hidden;
897
- }
898
-
899
- .progress-bar-inner {
900
- width: 30%;
901
- height: 100%;
902
- background: linear-gradient(90deg, #007aff, #28c840);
903
- animation: progress 2s ease-in-out infinite;
904
- }
905
-
906
- .thinking-icon {
907
- font-size: 48px;
908
- margin: 20px 0;
909
- animation: bounce 1s ease infinite;
910
- }
911
-
912
- .tip-box {
913
- background: white;
914
- padding: 20px;
915
- border-radius: 10px;
916
- box-shadow: 0 4px 12px rgba(0,0,0,0.1);
917
- margin: 20px 0;
918
- transition: all 0.3s ease;
919
- }
920
-
921
- .status-text {
922
- color: #007aff;
923
- font-size: 18px;
924
- margin: 15px 0;
925
- animation: fade 1.5s ease infinite;
926
- }
927
-
928
- .icon-grid {
929
- display: grid;
930
- grid-template-columns: repeat(4, 1fr);
931
- gap: 15px;
932
- margin: 20px 0;
933
- }
934
-
935
- .icon-item {
936
- padding: 10px;
937
- background: rgba(0,122,255,0.1);
938
- border-radius: 8px;
939
- animation: pulse 2s ease infinite;
940
- }
941
-
942
- @keyframes progress {
943
- 0% { transform: translateX(-100%); }
944
- 100% { transform: translateX(400%); }
945
- }
946
-
947
- @keyframes bounce {
948
- 0%, 100% { transform: translateY(0); }
949
- 50% { transform: translateY(-10px); }
950
- }
951
-
952
- @keyframes fade {
953
- 0%, 100% { opacity: 1; }
954
- 50% { opacity: 0.6; }
955
- }
956
-
957
- @keyframes pulse {
958
- 0% { transform: scale(1); }
959
- 50% { transform: scale(1.05); }
960
- 100% { transform: scale(1); }
961
- }
962
- </style>
963
- </div>
964
- """)
965
-
966
-
967
-
968
- header = gr.HTML("""
969
- <div class="window-frame">
970
- <div class="window-header">
971
- <div class="window-controls">
972
- <div class="control close"></div>
973
- <div class="control minimize"></div>
974
- <div class="control maximize"></div>
975
- </div>
976
- <div class="window-title">
977
- <div class="window-address">
978
- <div class="secure-icon">*</div>
979
- <div class="url-bar">https://VIDraft-mouse-chat.hf.space</div>
980
- </div>
981
- </div>
982
- </div>
983
- <div class="app-content">
984
- <img src="data:image/gif;base64,{}" width="360px" />
985
- <h1 class="app-title">MOUSE-Chat Visual AI</h1>
986
- <p class="app-description">Creates visualized web pages from text input...</p>
987
  </div>
 
988
  </div>
989
- """.format(get_image_base64('mouse.gif')))
990
-
991
- input = antd.InputTextarea(
992
- size="large",
993
- allow_clear=True,
994
- placeholder=get_random_placeholder(),
995
- elem_classes="custom-textarea"
996
- )
997
-
998
- with antd.Flex(gap="small", justify="flex-start"):
999
- btn = antd.Button(
1000
- "Generate",
1001
- type="primary",
1002
- size="large",
1003
- elem_classes="generate-btn"
1004
- )
1005
- boost_btn = antd.Button(
1006
- "Enhance",
1007
- type="default",
1008
- size="large",
1009
- elem_classes="enhance-btn"
1010
- )
1011
- deploy_btn = antd.Button(
1012
- "Share",
1013
- type="default",
1014
- size="large",
1015
- elem_classes="share-btn"
1016
- )
1017
-
1018
- deploy_result = gr.HTML(
1019
- label="Share Result",
1020
- elem_classes="deploy-result"
1021
- )
1022
-
1023
- with antd.Col(span=24, md=16):
1024
- with ms.Div(elem_classes="right_panel"):
1025
- gr.HTML("""
1026
- <div class="window-frame">
1027
- <div class="window-header">
1028
- <div class="window-controls">
1029
- <div class="control close"></div>
1030
- <div class="control minimize"></div>
1031
- <div class="control maximize"></div>
1032
- </div>
1033
- <div class="window-title">Preview</div>
1034
- </div>
1035
- </div>
1036
- """)
1037
-
1038
- with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
1039
- with antd.Tabs.Item(key="empty"):
1040
- empty = antd.Empty(
1041
- description="Enter your question to begin",
1042
- elem_classes="right_content empty-content"
1043
- )
1044
-
1045
- with antd.Tabs.Item(key="loading"):
1046
- loading = antd.Spin(
1047
- True,
1048
- tip="Creating visual presentation...",
1049
- size="large",
1050
- elem_classes="right_content"
1051
- )
1052
-
1053
- with antd.Tabs.Item(key="render"):
1054
- sandbox = gr.HTML(elem_classes="html_content")
1055
-
1056
- with antd.Tabs.Item(key="error"):
1057
- error = antd.Empty(
1058
- description="An error occurred. Please try again.",
1059
- elem_classes="right_content error-content"
1060
- )
1061
-
1062
- mode.change(
1063
- fn=lambda x: x == "Generate + Web Search",
1064
- inputs=[mode],
1065
- outputs=[search_mode]
1066
- )
1067
-
1068
- btn.click(
1069
- fn=handle_generation,
1070
- inputs=[input, setting, search_mode],
1071
- outputs=[code_output, sandbox, state_tab, code_drawer]
1072
- ).then(
1073
- fn=update_placeholder,
1074
- inputs=[],
1075
- outputs=[input]
1076
- )
1077
-
1078
- boost_btn.click(
1079
- fn=handle_boost,
1080
- inputs=[input],
1081
- outputs=[input, state_tab]
1082
- )
1083
-
1084
- deploy_btn.click(
1085
- fn=lambda code: deploy_to_vercel(remove_code_block(code)) if code else "No code to share.",
1086
- inputs=[code_output],
1087
- outputs=[deploy_result]
1088
- )
1089
-
1090
- gr.HTML("""
1091
- <style>
1092
- .generate-btn {
1093
- background: #007aff !important;
1094
- border-radius: 8px !important;
1095
- box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
1096
- }
1097
-
1098
- .enhance-btn {
1099
- border-radius: 8px !important;
1100
- border: 1px solid #007aff !important;
1101
- color: #007aff !important;
1102
- }
1103
-
1104
- .share-btn {
1105
- border-radius: 8px !important;
1106
- border: 1px solid #28c840 !important;
1107
- color: #28c840 !important;
1108
- }
1109
-
1110
- .search-toggle-btn {
1111
- border-radius: 8px !important;
1112
- border: 1px solid #4285f4 !important;
1113
- color: #4285f4 !important;
1114
- }
1115
-
1116
- .generate-btn:hover {
1117
- background: #0056b3 !important;
1118
- }
1119
-
1120
- .enhance-btn:hover {
1121
- background: rgba(0,122,255,0.1) !important;
1122
- }
1123
-
1124
- .share-btn:hover {
1125
- background: rgba(40,200,64,0.1) !important;
1126
- }
1127
-
1128
- .search-toggle-btn:hover {
1129
- background: rgba(66,133,244,0.1) !important;
1130
- }
1131
- </style>
1132
- """)
1133
 
1134
  return demo
1135
 
 
759
  demo = gr.Blocks(css=custom_css, theme=theme)
760
 
761
  with demo:
762
+ with gr.Row(): # 전체를 감싸는 Row 추가
763
+ # 좌측 패널
764
+ with gr.Column(scale=1):
765
+ mode = gr.Radio(
766
+ choices=["Generate", "Generate + Web Search"],
767
+ label="Mode",
768
+ value="Generate",
769
+ info="Select 'Generate + Web Search' to include web search results",
770
+ elem_classes="mode-selector"
771
+ )
772
+
773
+ input = gr.Textbox(
774
+ label="Input",
775
+ placeholder=get_random_placeholder(),
776
+ lines=5,
777
+ elem_classes="custom-textarea"
778
+ )
779
+
780
  with gr.Row():
781
+ btn = gr.Button("Generate", elem_classes="generate-btn")
782
+ boost_btn = gr.Button("Enhance", elem_classes="enhance-btn")
783
+ deploy_btn = gr.Button("Share", elem_classes="share-btn")
784
+
785
+ deploy_result = gr.HTML(label="Share Result", elem_classes="deploy-result")
786
+
787
+ # 우측 패널
788
+ with gr.Column(scale=2):
789
+ with gr.Box(): # Box로 감싸서 시각적 구분
790
+ gr.HTML("""
791
+ <div class="window-frame">
792
+ <div class="window-header">
793
+ <div class="window-controls">
794
+ <div class="control close"></div>
795
+ <div class="control minimize"></div>
796
+ <div class="control maximize"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
797
  </div>
798
+ <div class="window-title">Preview</div>
799
  </div>
800
+ </div>
801
+ """)
802
+
803
+ # 결과 표시 영역
804
+ with gr.Tabs(selected="empty") as state_tab:
805
+ with gr.TabItem("empty"):
806
+ gr.Markdown("Enter your question to begin")
807
+ with gr.TabItem("loading"):
808
+ gr.Markdown("Creating visual presentation...")
809
+ with gr.TabItem("render"):
810
+ sandbox = gr.HTML(elem_classes="html_content")
811
+ with gr.TabItem("error"):
812
+ gr.Markdown("An error occurred. Please try again.")
813
+
814
+ # 상태 변수들
815
+ setting = gr.State({"system": SystemPrompt})
816
+ search_mode = gr.State(False)
817
+ code_output = gr.State("")
818
+
819
+ # Drawer 컴포넌트
820
+ with gr.Box() as code_drawer:
821
+ gr.HTML("""
822
+ <div class="thinking-container">
823
+ <!-- thinking container content -->
824
+ </div>
825
+ """)
826
+
827
+ # 이벤트 핸들러 연결
828
+ mode.change(fn=lambda x: x == "Generate + Web Search",
829
+ inputs=[mode],
830
+ outputs=[search_mode])
831
+
832
+ btn.click(fn=handle_generation,
833
+ inputs=[input, setting, search_mode],
834
+ outputs=[code_output, sandbox, state_tab, code_drawer])
835
+
836
+ boost_btn.click(fn=handle_boost,
837
+ inputs=[input],
838
+ outputs=[input, state_tab])
839
+
840
+ deploy_btn.click(fn=lambda code: deploy_to_vercel(remove_code_block(code)) if code else "No code to share.",
841
+ inputs=[code_output],
842
+ outputs=[deploy_result])
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
843
 
844
  return demo
845