Update app.py

app.py

@@ -1,10 +1,8 @@
 import gradio as gr
-from share_btn import community_icon_html, loading_icon_html, share_js
-import re
-import os
 import openai
-OPENAI_API_KEY = os.environ.get('OPENAI_API_KEY')
 from gradio_client import Client
+
+OPENAI_API_KEY = os.environ.get('OPENAI_API_KEY')
 clipi_client = Client("https://fffiloni-clip-interrogator-2.hf.space/")
 
 def generate_image_url(keywords):
@@ -17,7 +15,7 @@ def infer(image_input, audience, keyword, protagonist):
     story_intro = f"""
     # Illustrated Tales
     ## Created by [Sigkawat Pengnoo](https://flowgpt.com/prompt/qzv2D3OvHkzkfSE4rQCqv) at FlowGPT
-    
+
     Keyword: {keyword}
     Protagonist: {protagonist}
     한국어로 답변해줘.
@@ -29,18 +27,74 @@ def infer(image_input, audience, keyword, protagonist):
 
     chapters = []
     current_image_url = generate_image_url(clipi_result)
-    for chapter_num in range(1, 4): # 3개의 장을 생성합니다.
+    for chapter_num in range(1, 4):  # 3개의 장을 생성합니다.
+        gr.Info(f'Chapter {chapter_num}를 생성하고 있습니다...')
         chapter_prompt = f"{story_intro}\n\n![Chapter {chapter_num} Image]({current_image_url})\n\nChapter {chapter_num} 내용을 만들어줘."
         chat_completion = openai.ChatCompletion.create(model="gpt-3.5-turbo-16k", messages=[{"role": "user", "content": chapter_prompt}])
         chapter_story = chat_completion.choices[0].message.content
         chapters.append(chapter_story)
-        current_image_url = generate_image_url(chapter_story) # 다음 장의 이미지 URL을 생성합니다.
+        current_image_url = generate_image_url(chapter_story)  # 다음 장의 이미지 URL을 생성합니다.
 
     formatted_text = '\n'.join(chapters)
     return formatted_text, gr.Group.update(visible=True)
 
 css = """
-# 여기에 이전에 정의한 CSS 코드를 넣으세요.
+#col-container {max-width: 910px; margin-left: auto; margin-right: auto;}
+a {text-decoration-line: underline; font-weight: 600;}
+a {text-decoration-line: underline; font-weight: 600;}
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  from {
+      transform: rotate(0deg);
+  }
+  to {
+      transform: rotate(360deg);
+  }
+}
+#share-btn-container {
+  display: flex;
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+  background-color: #000000;
+  justify-content: center;
+  align-items: center;
+  border-radius: 9999px !important;
+  max-width: 13rem;
+}
+div#share-btn-container > div {
+    flex-direction: row;
+    background: black;
+    align-items: center;
+}
+#share-btn-container:hover {
+  background-color: #060606;
+}
+#share-btn {
+  all: initial;
+  color: #ffffff;
+  font-weight: 600;
+  cursor:pointer;
+  font-family: 'IBM Plex Sans', sans-serif;
+  margin-left: 0.5rem !important;
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
+  right:0;
+}
+#share-btn * {
+  all: unset;
+}
+#share-btn-container div:nth-child(-n+2){
+  width: auto !important;
+  min-height: 0px !important;
+}
+#share-btn-container .wrap {
+  display: none !important;
+}
+#share-btn-container.hidden {
+  display: none!important;
+}
 """
 
 with gr.Blocks(css=css) as demo:
@@ -60,19 +114,6 @@ with gr.Blocks(css=css) as demo:
                 submit_btn = gr.Button('이야기와 그림을 만들어 주세요')
             with gr.Column():
                 story = gr.Textbox(label="생성된 이야기와 그림", elem_id="story")
-                with gr.Group(elem_id="share-btn-container", visible=False) as share_group:
-                    community_icon = gr.HTML(community_icon_html)
-                    loading_icon = gr.HTML(loading_icon_html)
-                    share_button = gr.Button("Share to community", elem_id="share-btn")
-
-        gr.Examples(examples=[["./examples/crabby.png", "Children", "해변에서의 모험", "게 주인공"],["./examples/hopper.jpeg", "Adult", "산에서의 여행", "토끼 주인공"]],
-                    fn=infer,
-                    inputs=[image_in, audience, keyword_in, protagonist_in],
-                    outputs=[story, share_group],
-                    cache_examples=True
-                   )
-
-    submit_btn.click(fn=infer, inputs=[image_in, audience, keyword_in, protagonist_in], outputs=[story, share_group])
-    share_button.click(None, [], [], _js=share_js)
 
-demo.queue(max_size=12).launch()
+    submit_btn.click(fn=infer, inputs=[image_in, audience, keyword_in, protagonist_in], outputs=[story])
+    demo.queue(max_size=12).launch()