app.py

import numpy as np
import os
import gradio as gr
import openai


def continueStory(blank, messageHistory):

    openai.api_key = os.environ['OPENAI_KEY']

    messageHistory.append({"role": "user", "content": blank + "\n\nGenerate the next paragraph with a blank in the last line for me to fill. There should only be one and only one blank in the paragraph. The blank should be at the end of the last line of the paragraph. It is very importat that there is only one blank and that it is at the end!"})
  

    response = openai.ChatCompletion.create(
      model="gpt-3.5-turbo",
      messages = messageHistory
    )
    
    story = response["choices"][0]["message"]["content"]
    messageHistory.append(response["choices"][0]["message"])
    print(messageHistory)
    return story, messageHistory


with gr.Blocks(css='''
  .gradio-container {
    display: flex;
    flex-direction: column;
    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 {
    font-size: 3rem;
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: white;
  }

  p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: white;
  }

  #row {
    width: 40%;
    margin: 0 auto;
  }

  label {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
  }

  input[type="text"], textarea {
    font-size: 1.25rem;
    padding: 0.5rem;
    border: 2px solid #ccc;
    border-radius: 5px;
    width: 100%;
  }

  .gradio-button {
    background-color: #2196f3;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    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:
    title = gr.HTML('''
        <div style="text-align: center;">
            <h1 style="color: white; font-size: 3rem; font-weight: 700; margin-bottom: 1rem; color: white;">Infinite Stories</h1>
            <p style="color: white; font-size: 1.25rem; margin-bottom: 2rem; color: white;">Let's see where your imagination can take you!</p>
        </div>
    ''')

        # 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)}

    def submitFeedback():
        return {thankyou: gr.update(visible=True), feedbackForm: gr.update(visible=False)}

    def generateStory(character):
   
      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."},
              {"role": "user", "content": f"Please write the first paragraph of a story about {character}. The story needs to be set in a magic island. Make sure you only write one paragraph, that is not too long. Also, make sure is has a blank in the last line of the last paragraph for me to fill. There should only be one blank in the paragraph. The blank should be at the end of the last line of the paragraph. It is very important that there is only one blank and that it is at the end, and that you only generate one paragraph!"}
          ]
      response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages = messageHistory
      )
      
      story = response["choices"][0]["message"]["content"]
      messageHistory.append(response["choices"][0]["message"])
    
      return story, messageHistory

    def finishStory(blank, messageHistory):

      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."})


      response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages = messageHistory
      )
      
      story = response["choices"][0]["message"]["content"]
      messageHistory.append(response["choices"][0]["message"])
      print(messageHistory)
      return story, messageHistory

    def createNewStory():
        return {character: gr.update(value=""), story_output: gr.update(value="")}

    def hideContinueBtn():
      return {continueStoryCol: gr.update(visible=False), newStoryCol: gr.update(visible=True), finishCol: gr.update(visible=False)}
    

    with gr.Column(elem_id="main_col"):
        
               
        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])

    finishBtn.click(finishStory, inputs=[blank, messageHistory], outputs=[story_output, messageHistory])
    finishBtn.click(hideContinueBtn, [], [continueStoryCol, newStoryCol, finishCol])

    provideFeedbackBtn.click(show_feedback_text, [], [feedbackForm])

    submitFeedbackBtn.click(submitFeedback, [], [thankyou, feedbackForm])

    newStoryBtn.click(createNewStory, [], [character, story_output])


demo.launch(debug=True, share=False)