Update app.py

app.py

@@ -4,6 +4,7 @@ import gradio as gr
 import openai
 
 
+
 def continueStory(blank, messageHistory):
 
     openai.api_key = os.environ['OPENAI_KEY']
@@ -22,6 +23,8 @@ def continueStory(blank, messageHistory):
     return story, messageHistory
 
 
+
+
 with gr.Blocks(css='''
   .gradio-container {
     display: flex;
@@ -29,7 +32,7 @@ with gr.Blocks(css='''
     justify-content: center;
     align-items: center;
     background-image: url('file=https://cdn.discordapp.com/attachments/941582479117127680/1080730421425344542/rodotcom_colorful_abstract_illustration_for_the_background_of_c_f1b331d7-6493-4a33-9063-345d31a66ddb.png');
-    padding: 1rem;
+    
   }
 
   h1 {
@@ -46,10 +49,6 @@ with gr.Blocks(css='''
     color: white;
   }
 
-  #row {
-    width: 40%;
-    margin: 0 auto;
-  }
 
   label {
     font-size: 1.25rem;
@@ -74,17 +73,12 @@ with gr.Blocks(css='''
     border-radius: 5px;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
-    width: 50%;
   }
 
   .gradio-button:hover {
     background-color: #0c7cd5;
   }
 
-  #main_col {
-      margin: 0 auto;
-  }
-
   
 
 ''') as demo:
@@ -94,10 +88,45 @@ with gr.Blocks(css='''
             <p style="color: white; font-size: 1.25rem; margin-bottom: 2rem; color: white;">Let's see where your imagination can take you!</p>
         </div>
     ''')
+    with gr.Row(elem_id='row'):        
+      character = gr.Textbox(label='Who will be the main character?', elem_id = 'theme', placeholder="i.e. Diego, an 11-year-old pirate")
+      
+    messageHistory = gr.State()
+
+    beginBtn = gr.Button("Start!", elem_id="generate-btn")
+
+    story_output = gr.Textbox(label='Story')
+
+    blank = gr.Textbox(label='How will you fill the blank?', elem_id = 'blank')
+
+    with gr.Column(visible=True) as continueStoryCol:
+      continueBtn = gr.Button("Continue Story", elem_id="continue-btn") 
+
+    with gr.Column(visible=False) as newStoryCol:
+      newStoryBtn = gr.Button("Create New Story", elem_id="new-story-btn") 
+
+    with gr.Column(visible=True) as finishCol:
+      finishBtn = gr.Button("Finish Story", elem_id="finish-btn") 
+    
+    provideFeedbackBtn = gr.Button("Provide Feedback", elem_id="feedback-btn")
+
+    with gr.Column(visible=False) as feedbackForm:
+      gr.Radio(["1", "2", "3", "4", "5"], label="How would you rate the story")
+      feedback_text = gr.Textbox(label='Any other comments?')
+      submitFeedbackBtn = gr.Button("Submit Feedback", elem_id="submit-feedback-btn")
+
+    with gr.Column(visible=False) as thankyou:
+      
+      feedback_text = gr.HTML("<h2>Thanks for your feeback!</h2>")
+
+    with gr.Column(visible=False) as mesHistoryCol:
+      
+      messageHistoryTextBox = gr.Textbox(label='How will you fill the blank?', elem_id = 'blank', value=messageHistory)
+      
 
-        # the submit feedback btn needs to: send the feedback, 
-    # hide the elements and provide a message saying thanks for your feedback
-        
+# the submit feedback btn needs to: send the feedback, 
+# hide the elements and provide a message saying thanks for your feedback
+    
     def show_feedback_text():
         return {feedbackForm: gr.update(visible=True)}
 
@@ -106,7 +135,7 @@ with gr.Blocks(css='''
 
     def generateStory(character):
    
-      openai.api_key = os.environ['OPENAI_KEY']
+      openai.api_key = openai.api_key = os.environ['OPENAI_KEY']
 
       messageHistory=[
               {"role": "system", "content": "You are co-writing assistant that will help me generate an interactive storytelling game. You are going to generate one paragraph at a time but you are going to leave a blank somewhere in the last line of the paragraph. The user will have to fill this blank in order to generate the next paragraph. You have to write in the style of Julia Donaldson and Doctor Seuss. Make the story funny and exciting. For more context, the game works as follows. 1. You generate one, and only one paragraph, with a blank somewhere in the last line of the paragraph. 2. The user tells you how they want to fill the blank. 3. You generate the next paragraph based on the user’s response to continue the story. This next paragraph also has a blank somewhere in the last line of the paragraph. 4. The user tells you how they want to fill the blank. And so on. Please make sure that when you write a paragraph, there is only one blank and it is at the end of the last line."},
@@ -124,7 +153,7 @@ with gr.Blocks(css='''
 
     def finishStory(blank, messageHistory):
 
-      openai.api_key = os.environ['OPENAI_KEY']
+      openai.api_key = openai.api_key = os.environ['OPENAI_KEY']
 
       messageHistory.append({"role": "user", "content": blank + "\n\nNow bring the story to a close. Write the necessary paragraphs to make it have a happy or funny ending. No need to leave a blank anymore."})
 
@@ -140,49 +169,12 @@ with gr.Blocks(css='''
       return story, messageHistory
 
     def createNewStory():
-        return {character: gr.update(value=""), story_output: gr.update(value="")}
+        return {character: gr.update(value=""), story_output: gr.update(value=""), blank:  gr.update(value="")}
 
     def hideContinueBtn():
       return {continueStoryCol: gr.update(visible=False), newStoryCol: gr.update(visible=True), finishCol: gr.update(visible=False)}
-    
-
-    
-    character = gr.Textbox(label='Who will be the main character?', elem_id = 'theme', placeholder="i.e. Diego, an 11-year-old pirate")
-
-    
-    messageHistory = gr.State()
-
-    beginBtn = gr.Button("Start!", elem_id="generate-btn")
-
-    story_output = gr.Textbox(label='Story')
-
-    blank = gr.Textbox(label='How will you fill the blank?', elem_id = 'blank')
-
-    with gr.Column(visible=True) as continueStoryCol:
-      continueBtn = gr.Button("Continue Story", elem_id="continue-btn") 
-
-    with gr.Column(visible=False) as newStoryCol:
-      newStoryBtn = gr.Button("Create New Story", elem_id="new-story-btn") 
 
-    with gr.Column(visible=True) as finishCol:
-      finishBtn = gr.Button("Finish Story", elem_id="finish-btn") 
-    
-    provideFeedbackBtn = gr.Button("Provide Feedback", elem_id="feedback-btn")
 
-    with gr.Column(visible=False) as feedbackForm:
-      gr.Radio(["1", "2", "3", "4", "5"], label="How would you rate the story")
-      feedback_text = gr.Textbox(label='Any other comments?')
-      submitFeedbackBtn = gr.Button("Submit Feedback", elem_id="submit-feedback-btn")
-
-    with gr.Column(visible=False) as thankyou:
-      
-      feedback_text = gr.HTML("<h2>Thanks for your feeback!</h2>")
-
-    with gr.Column(visible=False) as mesHistoryCol:
-      
-      messageHistoryTextBox = gr.Textbox(label='How will you fill the blank?', elem_id = 'blank', value=messageHistory)
-          
-    
     beginBtn.click(generateStory, inputs=[character], outputs=[story_output, messageHistory])
     
     continueBtn.click(continueStory, inputs=[blank, messageHistory], outputs=[story_output, messageHistory])
@@ -194,7 +186,7 @@ with gr.Blocks(css='''
 
     submitFeedbackBtn.click(submitFeedback, [], [thankyou, feedbackForm])
 
-    newStoryBtn.click(createNewStory, [], [character, story_output])
+    newStoryBtn.click(createNewStory, [], [character, story_output, blank])
 
 
-demo.launch(debug=True, share=False)
+demo.launch(debug=True, share=True)