cs103a_TeamProjects/ca01/gptwebapp.py at main · ClarkXu0625/cs103a_TeamProjects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
'''
gptwebapp shows how to create a web app which ask the user for a prompt
and then sends it to openai's GPT API to get a response. You can use this
as your own GPT interface and not have to go through openai's web pages.

We assume that the APIKEY has been put into the shell environment.
Run this server as follows:

On Mac
% pip3 install openai
% pip3 install flask
% export APIKEY="......."  # in bash
% python3 gptwebapp.py

On Windows:
% pip install openai
% pip install flask
% $env:APIKEY="....." # in powershell
% python gptwebapp.py
'''
from flask import request, redirect, url_for, Flask, render_template
from gpt import GPT
import os


app = Flask(__name__)
gptAPI = GPT(os.environ.get('APIKEY'))

# Set the secret key to some random bytes. Keep this really secret!
# app.secret_key = b'_5#y2L"F4Q789789uioujkkljkl...8z\n\xec]/'

# @app.route('/')
# def index():
#  ''' display a link to the general query page '''
# print('processing / route')
#  return f'''
#    <h1>GPT Demo</h1>
#     <a href="{url_for('gptdemo')}">Ask questions to GPT</a>
# '''


@app.route('/')
def index():
    ''' display a link to each team member's page '''
    return f'''
        <html style="font-family: Arial, Helvetica, sans-serif;">
        <h1>COSI 103a Team 2</h1>

        <figure>
        <figcaption>Website Breakdown</figcaption>
        <ul>

        <li><a href="/about">About us</a></li>
        <li><a href="/team">Team Biographies</a></li>

        </ul>
        </figure>

        <figure>
        <figcaption>Team Member GPT Prompts</figcaption>
        <ul>
        <li><a href="/EphraimZimmerman">Ephraim Zimmerman</a></li>
        <li><a href="/JohnXie">John Xie</a></li>
        <li><a href="/ClarkXu">Clark Xu</a></li>
        </ul>
        </figure>
        </html>
    '''
# render_template("index.html")


@app.route('/about')
def about():
    ''' display information about the program '''

    return f'''
    <!DOCTYPE html>
        <html style="font-family: Arial, Helvetica, sans-serif;">
        <head>
            <title>About Us</title>
        </head>
        <body>
            <h1>About Us</h1>
            <h4>Here is some information about our program and what it does.</h4>
            <p>We have designed a webapp that interacts with the OpenAI API.
            Each of our team member designed a function to help you get response in specific scenario
                <li><a>Ephraim Zimmerman: bullets for resume, could be used for LinkedIn</a></li>
                <li><a>John Xie: generate a summary from gpt </a></li>
                <li><a>Clark Xu: rewrite the prompt in 10th grade readability when you read complex papers or articles</a></li>
            </p>
        </body>
        </html>

    '''


@app.route('/team')
def team():
    ''' display a page with information about the team '''
    return f'''

    <!doctype html>
        <html style="font-family: Arial, Helvetica, sans-serif;">
    <head>
        <title>Team Page</title>
    </head>
    <body>
        <h1>Our Team</h1>
        <h2>John Xie</h2>
        <p>I've initialize the project, such create all folders,files, and basic layout. I also finish my own page.</p>

        <h2>Ephraim Zimmerman</h2>
        <p>As a short introduction, I am a sophomore majoring in Computer Science! I stylized the HTML pages and improved on the files linked throughout the site. Also fixed various bugs having to do with loading the HTML and connecting ChatGPT with our site.  </p>

        <h2>Clark Xu</h2>
        <p>I wrote the 'About us' HTML page and styled it. I also wrote my function page for reformating text readability.</p>
    </body>
    </html>

    '''


@app.route('/<member>', methods=['GET', 'POST'])
def gptdemo(member):
    ''' handle a get request by sending a form
        and a post request by returning the GPT response
    '''

    description = None
    john_description = "enter article or a piece of text, then it will return a summary of it."
    ephraim_description = "Enter what you do for work, and we will give you  bullet points you can put on your resume/LinkedIn!"
    clark_description = "Rewrite the prompt in 10th grade readability"

    if member == "EphraimZimmerman":
        description = ephraim_description
    elif member == "JohnXie":
        description = john_description
    elif member == "ClarkXu":
        description = clark_description
    else:
        description = "Invalid member! Please go back and try again."


    if request.method == 'POST':
        prompt = request.form['prompt']
        if member == 'JohnXie':
            description = ""
            answer = gptAPI.get_summary(prompt)
        elif member == 'ClarkXu':
            # modify here for your own method
            description = ""

            answer = gptAPI.rewrite_tenth_grade_readability(prompt)
        elif member == 'EphraimZimmerman':
            # modify here for your own method
            description = "Hello!"
            answer = gptAPI.generate_linkedin_response(prompt)
        else:
            answer = "Invalid member"
        return f'''

    <html style="font-family: Arial, Helvetica, sans-serif;">

        <h1>GPT Demo for {member}</h1>
        <pre style="bgcolor:yellow">{prompt}</pre>
        <hr>
        Here is the answer in text mode:
        <div style="border:thin solid black">{answer}</div>
        Here is the answer in "pre" mode:
        <pre style="border:thin solid black">{answer}</pre>
        <a href='/{member}'> make another query</a>
                    </html>

        '''
    else:
        return f'''

        <html style="font-family: Arial, Helvetica, sans-serif;">

        <h1>GPT Demo for {member}</h1>
        <i>{description}</i>
        <br></br>
        <form method="post">
            <textarea style= 'width:50%; height:10%' name="prompt"></textarea>
            <p><input type=submit value="Get Response">
            <p>It may take up to 30 seconds to get a response! </p>
        </form>
            </html>

        '''


if __name__ == '__main__':
    # run the code on port 5001, MacOS uses port 5000 for its own service :(
    app.run(debug=True, port=5001)