├── .gitignore
├── Dockerfile
├── LICENSE
├── README.md
├── app.py
├── images
    ├── dynamic-gpt-ui-feedback.png
    └── dynamic-gpt-ui-question.png
├── requirements.txt
└── templates
    └── base.html


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | .env
 3 | .flaskenv
 4 | *.pyc
 5 | *.pyo
 6 | env/
 7 | venv/
 8 | .venv/
 9 | env*
10 | dist/
11 | build/
12 | *.egg
13 | *.egg-info/
14 | .tox/
15 | .cache/
16 | .pytest_cache/
17 | .idea/
18 | docs/_build/
19 | .vscode
20 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | # syntax=docker/dockerfile:1.4
 2 | FROM python:3.10-alpine
 3 | 
 4 | WORKDIR /app
 5 | 
 6 | COPY . /app
 7 | RUN python3 -m pip install -r requirements.txt
 8 | 
 9 | EXPOSE 5000
10 | ENTRYPOINT ["python3"]
11 | CMD ["app.py"]
12 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Maurício Maia
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Dynamic UI Generation with GPT (OpenAI)
 2 | 
 3 | As GPT is capable of generating code, including front-end, it should be possible to create an app that direcly renders the ouput of a GPT prompt. Creating a dynamic UI.
 4 | 
 5 | GPT could generate UI elements such as forms, tables, and other common UI components.
 6 | 
 7 | This can be useful for applications that need to generate UI dynamically based on user inputs, their preferences and usage patterns.
 8 | 
 9 | Dynamic UI generation can also be used to create data visualizations. These charts can be customized and updated dynamically based on the user's needs and the data being displayed.
10 | 
11 | ## Proof of Concept
12 | 
13 | In this proof of concept, the OpenAI API is used with `text-davinci-003`.
14 | 
15 | ### Interview Feedback App
16 | 
17 | This app is a simple web application that helps to evaluate a Senior Software Engineer candidate interviewing at a startup. It collects the candidate's answer to a question and outputs some thoughtful feedback. The app is built using the Flask framework and uses the OpenAI API for generating the UI, the question, and the feedback.
18 | 
19 | <img src="https://user-images.githubusercontent.com/165865/216793631-b07702bc-f236-4afa-b909-b50fc4186528.png" alt="Question screenshot" width="50%" />
20 | 
21 | <img src="https://user-images.githubusercontent.com/165865/216793654-d3b4f756-8855-4795-8f19-ab32c8a638b7.png" alt="Feedback screenshot" width="50%" />
22 | 
23 | 
24 | ### Requirements
25 | 
26 | - Python 3.x
27 | - Flask
28 | - OpenAI API Key
29 | 
30 | ### Installation
31 | 
32 | 1. Clone the repository: `git clone https://github.com/mmmaia/dynamic-gpt-ui.git`
33 | 2. Change into the project directory: `cd dynamic-gpt-ui`
34 | 3. Create a virtual environment: `python3 -m venv venv`
35 | 4. Activate the virtual environment: `source venv/bin/activate`
36 | 5. Install the required packages: `pip install -r requirements.txt`
37 | 6. Export the OpenAI API Key: `export OPENAI_KEY=[your_api_key]`
38 | 
39 | ### Usage
40 | 
41 | To start the app, run: `python app.py`
42 | 
43 | The app will be available at `http://localhost:5000/`.
44 | 
45 | ### License
46 | 
47 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
48 | 
49 | 


--------------------------------------------------------------------------------
/app.py:
--------------------------------------------------------------------------------
 1 | from flask import Flask, render_template, request
 2 | from textwrap import dedent
 3 | import openai
 4 | import os
 5 | 
 6 | app = Flask(__name__)
 7 | prompt = ""
 8 | 
 9 | def openai_ui(prompt):
10 |     openai.api_key = os.environ['OPENAI_KEY']
11 | 
12 |     try:
13 |         response = openai.Completion.create(
14 |             engine="text-davinci-003",
15 |             prompt=prompt,
16 |             max_tokens=256,
17 |             temperature=0.6,
18 |             top_p=1.0,
19 |             frequency_penalty=0,
20 |             presence_penalty=0.5
21 |         )
22 | 
23 |         return response.choices[0].text
24 |     except openai.OpenAIException as e:
25 |             return "Error: {}".format(str(e))
26 | 
27 | @app.route('/')
28 | def index():
29 |     title = 'Hello!'
30 |     html = '''
31 |         <p>The next page is generated by OpenAI API</p>
32 |         <p><a href="/interview" class="text-lg text-blue-600 hover:text-blue-700 underline">Show me!</a></p>
33 |     '''
34 |     return render_template('base.html', title=title, content=html)
35 | 
36 | @app.route('/interview', methods=['GET', 'POST'])
37 | def interview():
38 |     global prompt
39 |     if request.method == 'GET':
40 |         prompt = dedent("""
41 |         Beautiful HTML styled with TailwindCSS to collect one answer for a question to evaluate a Senior Software Engineer candidate interviewing at a startup.
42 |         Form action='/interview', method='post'.
43 |         Element named: `q`
44 |         """).strip("\n")
45 | 
46 |         title = "Interview"
47 |         html = openai_ui(prompt)
48 |         prompt += "\n{}\n".format(html)
49 | 
50 |         return render_template('base.html', title=title, content=html)
51 |     else:
52 |         q = request.form['q'].strip()
53 |         prompt += dedent("""
54 |         Evaluate the candidate's answer and give some thoughtful feedback. Output as HTML element styled with TailwindCSS.
55 |         Candidate answer: {}
56 |         Output:
57 |         """).format(q).strip("\n")
58 | 
59 |         title = "Feedback"
60 |         html = openai_ui(prompt)
61 |         return render_template('base.html', title=title, content=html)
62 | 
63 | if __name__ == '__main__':
64 |     app.run(host='0.0.0.0', port=5000)
65 | 
66 | 


--------------------------------------------------------------------------------
/images/dynamic-gpt-ui-feedback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmmaia/dynamic-gpt-ui/928e4800f442462aabc95632f05429f53646e4df/images/dynamic-gpt-ui-feedback.png


--------------------------------------------------------------------------------
/images/dynamic-gpt-ui-question.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mmmaia/dynamic-gpt-ui/928e4800f442462aabc95632f05429f53646e4df/images/dynamic-gpt-ui-question.png


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | flask
2 | openai


--------------------------------------------------------------------------------
/templates/base.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Dynamic GPT App</title>
 7 |   <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
 8 | </head>
 9 | 
10 | <body class="h-full font-sans antialiased font-normal leading-normal bg-white">
11 |   <div class="main flex flex-col">
12 |     <div class="px-3 lg:px-0 h-full">
13 |       <div class="container grid mx-auto my-8 text-center">
14 |         <h1 class="text-3xl font-bold my-12">
15 |           {{ title }}
16 |         </h1>
17 |         <div class="mx-auto w-1/2 p-8">
18 |           {{ content|safe }}
19 |         </div>
20 |         <div class="mx-auto mt-32">
21 |           <a href="https://github.com/mmmaia/dynamic-gpt-ui">
22 |             <img src="https://simpleicons.now.sh/github/000" class="mr-4 w-[32px] h-[32px] inline-block">
23 |             <img src="https://badgen.net/badge/license/MIT/blue?icon=github" alt="MIT LICENSE" class="inline-block"/>
24 |           </a>
25 | 	  <p class="text-sm text-gray-700">Interested in AI? Check <a href="https://bestaijobs.co/">careers at top AI companies</a></p>
26 |         </div>
27 |       </div>
28 |     </div>
29 |   </div>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------