I have a website where I always need to put text in a text box to my ChatGPT API and optionally need to select a graph from radio buttons.
I want to change the website so I can optionally put text in the text box and optionally select a graph with one Submit button for each.
Below is the website with one working Submit button:
https://chatgpt-api-flask-website-v7-main.onrender.com/
Below is the code for that website:
https://github.com/ProfHariSeldon/ChatGPT-API-Flask-Website-v7-main
Below is the more recent code with two submit buttons that act the same as one submit button always needs to type in the text box and optionally radio button a graph.
main.py
if selected_graph: radio button block of code may need to be moved or changed because it seems to still be tied to the text box being required, which might be the block of code if request.method == 'POST':. The code before @app.route('/', methods=['GET', 'POST']) may be ignored because it is not part of the website it is trying to not use the HTML ChatGPT API but use my ChatGPT Transcriptome Classifier custom GPT and it successfully asks that a question in the command line “How many circRNAs are in hsa_hg38_circRNA.bed?” I don’t know how to ask questions of my ChatGPT Transcriptome Classifier custom GPT outside of the command line, that is future research. Right now I want to change the website so I can optionally put text in the text box and optionally select a graph with one Submit button for each.
# openai migrate
##with open("./static/chromosomes.py") as f:
## exec(f.read())
from flask import Flask, request, render_template, redirect
import openai
# Import the os module to interact with operating system features. This includes fetching environment variables.
import os
# Import specific classes or functions directly from their modules to avoid prefixing them with the module name.
# Import the OpenAI library
import openai
# from openai import OpenAI
# Import the load_dotenv and find_dotenv functions from the dotenv package.
# These are used for loading environment variables from a .env file.
from dotenv import load_dotenv, find_dotenv
# Load environment variables from a .env file.
_ = load_dotenv(find_dotenv())
# Set the OpenAI API key by retrieving it from the environment variables.
# OpenAI.api_key = os.environ['OPENAI_API_KEY']
# OpenAI.assistant_key = os.environ['ASSISTANT_ID']
app = Flask(__name__)
# can be empty
client = openai.OpenAI(
# This is the default and can be omitted
api_key = os.environ.get("OPENAI_API_KEY"),
# assistant_id = os.environ.get('ASSISTANT_ID')/
)
# /questions/78018805/how-to-execute-custom-actions-with-chatgpt-assistants-api
assistantId = os.environ.get('ASSISTANT_ID')
# https://www.youtube.com/watch?v=pZUDEQs89zc
# https://mer.vin/2023/11/chatgpt-assistants-api/
# https://platform.openai.com/docs/assistants/overview?context=with-streaming
import time
# Step 1: Create an Assistant
##assistant = client.beta.assistants.create(
## name="Transcriptome Classifier",
## instructions="I want you to act as a scientific data visualizer. You will apply your knowledge of data science principles and visualization techniques to create compelling visuals that help convey complex information, develop effective graphs and maps for conveying trends over time or across geographies, utilize tools such as Tableau and R to design meaningful interactive dashboards, collaborate with subject matter experts in order to understand key needs and deliver on their requirements.",
## # model="gpt-4-1106-preview"
## model="gpt-3.5-turbo"
##)
# Step 2: Create a Thread
thread = client.beta.threads.create()
# Step 3: Add a Message to a Thread
message = client.beta.threads.messages.create(
thread_id=thread.id,
role="user",
## content = "What information would you like about the transcriptome?",
content = "How many circRNAs are in hsa_hg38_circRNA.bed?"
)
from typing_extensions import override
from openai import AssistantEventHandler
# First, we create a EventHandler class to define
# how we want to handle the events in the response stream.
class EventHandler(AssistantEventHandler):
@override
def on_text_created(self, text) -> None:
print(f"nassistant > ", end="", flush=True)
@override
def on_text_delta(self, delta, snapshot):
print(delta.value, end="", flush=True)
def on_tool_call_created(self, tool_call):
print(f"nassistant > {tool_call.type}n", flush=True)
def on_tool_call_delta(self, delta, snapshot):
if delta.type == 'code_interpreter':
if delta.code_interpreter.input:
print(delta.code_interpreter.input, end="", flush=True)
if delta.code_interpreter.outputs:
print(f"nnoutput >", flush=True)
for output in delta.code_interpreter.outputs:
if output.type == "logs":
print(f"n{output.logs}", flush=True)
# Then, we use the `create_and_stream` SDK helper
# with the `EventHandler` class to create the Run
# and stream the response.
with client.beta.threads.runs.create_and_stream(
thread_id=thread.id,
assistant_id=assistantId,
instructions="Please address the user as Jane Doe. The user has a premium account.",
event_handler=EventHandler(),
) as stream:
stream.until_done()
# /questions/46698134/how-to-post-the-output-result-on-the-same-page-in-flask-app
# https://chat.openai.com/g/g-b2dsUQrfB-transcriptome-classifier/c/d770e3a5-f565-4b7b-a234-6a75e81aec0a
@app.route('/', methods=['GET', 'POST'])
def index():
prompt = ""
response = ""
graph = ""
selected_graph = ""
if request.method == 'POST':
prompt = request.form.get('prompt')
selected_graph = request.form.get('graph')
if prompt:
try:
# completion = openai.Completion.create(
completion = client.chat.completions.create(
model='gpt-3.5-turbo',
# assistant_id=assistantId,
messages=[{"role": "user", "content": prompt}]
# engine="text-davinci-003",
# engine="gpt-3.5-turbo", # You can use other models like "gpt-3.5-turbo"
# prompt=prompt,
# temperature=0.7,
# max_tokens=150,
# top_p=1.0,
# frequency_penalty=0.0,
# presence_penalty=0.0
)
response = completion.choices[0].message.content
except Exception as e:
response = f"An error occurred: {str(e)}"
if selected_graph:
try:
print("Selected Graph = ", selected_graph)
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
files_paths = {
'genes': './static/hg38_genes.bed',
'introns': './static/hg38_introns.bed',
'CDS': './static/hg38_CDS.bed',
'5p': './static/hg38_5p.bed',
'3p': './static/hg38_3p.bed',
'circRNA': './static/hsa_hg38_circRNA.bed',
'exons' : './static/hg38_exons.bed'
}
bed_dfs = {}
for key, path in files_paths.items():
bed_dfs[key] = pd.read_csv(path, sep='t', header=None)
def adjust_frequency_for_chromosome(df, chromosome, bins):
df_chr = df[df[0] == chromosome]
positions = df_chr[1]._append(df_chr[2])
freq, bin_edges = np.histogram(positions, bins=bins)
return freq, bin_edges
chromosome = selected_graph
bins = 100
frequencies = {}
bin_edges_dict = {}
for key, df in bed_dfs.items():
frequencies[key], bin_edges_dict[key] = adjust_frequency_for_chromosome(df, chromosome, bins)
plt.figure(figsize=(15, 10))
for key, freq in frequencies.items():
plt.plot(bin_edges_dict[key][:-1], freq, label=f'{key} Frequency')
chromosome_number = chromosome[3:]
plt.xlabel(f'Genomic Position on Chromosome {chromosome_number}')
plt.ylabel('Frequency')
plt.title(f'Frequency of Genomic Features on Chromosome {chromosome_number}')
plt.legend()
plt.savefig(f'./static/images/{chromosome_number}.png')
plt.close()
graph = f'../static/images/{chromosome_number}.png'
print("graph path = ", graph)
except Exception as e:
response = f"An error occurred: {str(e)}"
return render_template('index.html', prompt=prompt, response=response, graph=graph)
if __name__ == '__main__':
# app.run(debug=True)
# app.run(debug=True, host='127.0.0.1', port=5000)
app.run(debug=True, host='0.0.0.0', port=5000)
# app.run(debug=True, host='8080', port=5000)
# server.run(debug=True, host='0.0.0.0', port=5000)
# /questions/78018805/how-to-execute-custom-actions-with-chatgpt-assistants-api
# https://platform.openai.com/docs/api-reference/models/delete
# https://www.youtube.com/watch?v=pZUDEQs89zc
# https://platform.openai.com/docs/assistants/overview?context=with-streaming
index.html
The two <button type="submit">Submit</button> may need to be changed so that the first only submits the text box ChatGPT API and the second only submits the radio button graphs.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Graph Selector</title>
</head>
<body>
<form method="post">
<label for="prompt">Type whatever you like as your ChatGPT 3.5 turbo prompt:</label>
<input type="text" id="prompt" name="prompt" required>
<button type="submit">Submit</button>
<fieldset>
<legend>Select a Graph to Dynamically calculate and display Transcriptome features:</legend>
<input type="radio" id="chr1" name="graph" value="chr1">
<label for="chr1">Chromosome 1 Graph</label>
<input type="radio" id="chr2" name="graph" value="chr2">
<label for="chr2">Chromosome 2 Graph</label>
<input type="radio" id="chr3" name="graph" value="chr3">
<label for="chr3">Chromosome 3 Graph</label>
<input type="radio" id="chr4" name="graph" value="chr4">
<label for="chr4">Chromosome 4 Graph</label>
<input type="radio" id="chr5" name="graph" value="chr5">
<label for="chr5">Chromosome 5 Graph</label>
<input type="radio" id="chr6" name="graph" value="chr6">
<label for="chr6">Chromosome 6 Graph</label>
<input type="radio" id="chr7" name="graph" value="chr7">
<label for="chr7">Chromosome 7 Graph</label>
<input type="radio" id="chr8" name="graph" value="chr8">
<label for="chr8">Chromosome 8 Graph</label>
<input type="radio" id="chr9" name="graph" value="chr9">
<label for="chr9">Chromosome 9 Graph</label>
<input type="radio" id="chr10" name="graph" value="chr10">
<label for="chr10">Chromosome 10 Graph</label>
<input type="radio" id="chr11" name="graph" value="chr11">
<label for="chr11">Chromosome 11 Graph</label>
<input type="radio" id="chr12" name="graph" value="chr12">
<label for="chr12">Chromosome 12 Graph</label>
<input type="radio" id="chr13" name="graph" value="chr13">
<label for="chr13">Chromosome 13 Graph</label>
<input type="radio" id="chr14" name="graph" value="chr14">
<label for="chr14">Chromosome 14 Graph</label>
<input type="radio" id="chr15" name="graph" value="chr15">
<label for="chr15">Chromosome 15 Graph</label>
<input type="radio" id="chr16" name="graph" value="chr16">
<label for="chr16">Chromosome 16 Graph</label>
<input type="radio" id="chr17" name="graph" value="chr17">
<label for="chr17">Chromosome 17 Graph</label>
<input type="radio" id="chr18" name="graph" value="chr18">
<label for="chr18">Chromosome 18 Graph</label>
<input type="radio" id="chr19" name="graph" value="chr19">
<label for="chr19">Chromosome 19 Graph</label>
<input type="radio" id="chr20" name="graph" value="chr20">
<label for="chr20">Chromosome 20 Graph</label>
<input type="radio" id="chr21" name="graph" value="chr21">
<label for="chr21">Chromosome 21 Graph</label>
<input type="radio" id="chr22" name="graph" value="chr22">
<label for="chr22">Chromosome 22 Graph</label>
<input type="radio" id="chrMT" name="graph" value="chrMT">
<label for="chrMT">Chromosome MT Graph</label>
<input type="radio" id="chrX" name="graph" value="chrX">
<label for="chrX">Chromosome X Graph</label>
<input type="radio" id="chrY" name="graph" value="chrY">
<label for="chrY">Chromosome Y Graph</label>
</fieldset>
<button type="submit">Submit</button>
</form>
{% if response %}
<h2>Response:</h2>
<p>{{ response }}</p>
{% if graph %}
<h2>Selected Graph:</h2>
<img src="{{ url_for('static', filename=graph) }}" alt="Selected Graph">
{% endif %}
{% endif %}
</body>
</html>```