Update app.py

app.py

@@ -1,5 +1,5 @@
 import gradio as gr
-from share_btn import community_icon_html, loading_icon_html, share_js
+from urllib.parse import quote
 import re
 import os
 import openai
@@ -9,7 +9,7 @@ OPENAI_API_KEY = os.environ.get('OPENAI_API_KEY')
 clipi_client = Client("https://fffiloni-clip-interrogator-2.hf.space/")
 
 def generate_image_url(keywords):
-    return f"https://image.pollinations.ai/prompt/{keywords}"
+    return f"https://image.pollinations.ai/prompt/{quote(keywords)}"
 
 def infer(image_input, audience, keyword, protagonist):
     gr.Info('Calling CLIP Interrogator, 이미지를 해석하고 있습니다...')
@@ -29,6 +29,7 @@ def infer(image_input, audience, keyword, protagonist):
     """
 
     chapters = []
+    images = []
     current_image_url = generate_image_url(clipi_result)
     for chapter_num in range(1, 4):  # 3개의 장을 생성합니다.
         gr.Info(f'Chapter {chapter_num}를 생성하고 있습니다...')
@@ -36,68 +37,22 @@ def infer(image_input, audience, keyword, protagonist):
         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)
+        images.append(current_image_url)
         current_image_url = generate_image_url(chapter_story)  # 다음 장의 이미지 URL을 생성합니다.
 
-    formatted_text = '\n'.join(chapters)
-    return formatted_text, gr.Group.update(visible=True)
+    return {
+        "chapter1_story": chapters[0],
+        "chapter1_image": images[0],
+        "chapter2_story": chapters[1],
+        "chapter2_image": images[1],
+        "chapter3_story": chapters[2],
+        "chapter3_image": images[2],
+    }, gr.Group.update(visible=True)
 
 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:
@@ -116,7 +71,13 @@ with gr.Blocks(css=css) as demo:
                 protagonist_in = gr.Textbox(label="주인공")
                 submit_btn = gr.Button('이야기와 그림을 만들어 주세요')
             with gr.Column():
-                story = gr.Markdown(label="생성된 이야기와 그림", elem_id="story")
+                chapter1_story = gr.Markdown(label="Chapter 1: 이야기", elem_id="chapter1_story")
+                chapter1_image = gr.Image(label="Chapter 1: 그림", elem_id="chapter1_image")
+                chapter2_story = gr.Markdown(label="Chapter 2: 이야기", elem_id="chapter2_story")
+                chapter2_image = gr.Image(label="Chapter 2: 그림", elem_id="chapter2_image")
+                chapter3_story = gr.Markdown(label="Chapter 3: 이야기", elem_id="chapter3_story")
+                chapter3_image = gr.Image(label="Chapter 3: 그림", elem_id="chapter3_image")
 
-    submit_btn.click(fn=infer, inputs=[image_in, audience, keyword_in, protagonist_in], outputs=[story])
+    submit_btn.click(fn=infer, inputs=[image_in, audience, keyword_in, protagonist_in], 
+                     outputs=[chapter1_story, chapter1_image, chapter2_story, chapter2_image, chapter3_story, chapter3_image])
     demo.queue(max_size=12).launch()