Spaces:
Running
Running
import streamlit as st | |
import pandas as pd | |
import random | |
# Set page configuration | |
st.set_page_config(page_title="ChatGPT Prompt Generator", page_icon="๐ง ", layout="wide") | |
# Custom CSS for horizontal button rows | |
st.markdown(""" | |
<style> | |
.main {background-color: #f8f9fa;} | |
.stButton button { | |
border-radius: 4px; | |
padding: 2px 4px; | |
font-size: 0.75em; | |
margin: 1px; | |
white-space: nowrap; | |
} | |
.stButton button:hover {background-color: #e9ecef;} | |
div[data-testid="stVerticalBlock"] {gap: 0.2rem;} | |
div[data-testid="stHorizontalBlock"] {gap: 0.3rem;} | |
.stTextArea textarea, .stTextInput input { | |
padding: 0.2rem; | |
font-size: 0.8em; | |
} | |
h1, h2, h3 {margin-top: 0; margin-bottom: 0.1rem; font-size: 0.9rem;} | |
p, div {margin-bottom: 0.1rem; font-size: 0.8rem;} | |
.category-row { | |
background-color: white; | |
border: 1px solid #e6e6e6; | |
border-radius: 4px; | |
padding: 5px; | |
margin-bottom: 5px; | |
} | |
.category-label { | |
font-weight: bold; | |
font-size: 0.85rem; | |
color: #333; | |
margin-right: 5px; | |
margin-bottom: 3px; | |
display: block; | |
} | |
.horizontal-buttons { | |
display: flex; | |
flex-wrap: wrap; | |
gap: 2px; | |
align-items: center; | |
} | |
.prompt-display { | |
background-color: #ffffff; | |
border-radius: 4px; | |
padding: 8px; | |
border: 1px solid #e9ecef; | |
min-height: 100px; | |
font-size: 0.8em; | |
white-space: pre-wrap; | |
} | |
</style> | |
""", unsafe_allow_html=True) | |
# Initialize session state for selections | |
if 'selections' not in st.session_state: | |
st.session_state.selections = { | |
'role': None, 'tone': None, 'instruction': None, 'length': None, | |
'content_type': None, 'audience': None, 'format': None, | |
'about': "", 'inclusion': "", 'exclusion': "", 'input_data': "" | |
} | |
# Data sets | |
data = { | |
'roles': [ | |
{"name": "Professional", "emoji": "๐"}, {"name": "Expert", "emoji": "๐ง "}, | |
{"name": "Friend", "emoji": "๐ค"}, {"name": "Copywriter", "emoji": "โ๏ธ"}, | |
{"name": "Creative Writer", "emoji": "๐๏ธ"}, {"name": "Sales Coach", "emoji": "๐ผ"}, | |
{"name": "Marketing Coach", "emoji": "๐"}, {"name": "Tech Consultant", "emoji": "๐ป"}, | |
{"name": "Life Coach", "emoji": "๐ง"}, {"name": "Data Analyst", "emoji": "๐"}, | |
{"name": "Influencer", "emoji": "๐ฑ"}, {"name": "Language Tutor", "emoji": "๐ฃ๏ธ"}, | |
{"name": "Fitness Trainer", "emoji": "๐ช"}, {"name": "Teacher", "emoji": "๐จโ๐ซ"}, | |
{"name": "Therapist", "emoji": "๐ง"}, {"name": "Detective", "emoji": "๐"} | |
], | |
'tones': [ | |
{"name": "Informative", "emoji": "โน๏ธ"}, {"name": "Inspirational", "emoji": "โจ"}, | |
{"name": "Humorous", "emoji": "๐"}, {"name": "Friendly", "emoji": "๐"}, | |
{"name": "Professional", "emoji": "๐"}, {"name": "Casual", "emoji": "๐"}, | |
{"name": "Persuasive", "emoji": "๐ค"}, {"name": "Encouraging", "emoji": "๐"}, | |
{"name": "Empathetic", "emoji": "๐ค"}, {"name": "Serious", "emoji": "๐"}, | |
{"name": "Enthusiastic", "emoji": "๐คฉ"}, {"name": "Thoughtful", "emoji": "๐ญ"} | |
], | |
'instructions': [ | |
{"name": "Create", "emoji": "๐จ"}, {"name": "Suggest", "emoji": "๐ก"}, | |
{"name": "Write", "emoji": "โ๏ธ"}, {"name": "Compose", "emoji": "๐"}, | |
{"name": "Analyze", "emoji": "๐"}, {"name": "Explain", "emoji": "๐"}, | |
{"name": "Describe", "emoji": "๐"}, {"name": "Summarize", "emoji": "๐"}, | |
{"name": "Compare", "emoji": "โ๏ธ"}, {"name": "Outline", "emoji": "๐"}, | |
{"name": "Evaluate", "emoji": "โญ"}, {"name": "List", "emoji": "๐"} | |
], | |
'lengths': [ | |
{"name": "300 Words", "emoji": "๐"}, {"name": "500 Words", "emoji": "๐"}, | |
{"name": "Short", "emoji": "๐ฉณ"}, {"name": "Medium", "emoji": "๐"}, | |
{"name": "Long", "emoji": "๐"}, {"name": "Brief", "emoji": "๐จ"}, | |
{"name": "Detailed", "emoji": "๐"}, {"name": "Comprehensive", "emoji": "๐"} | |
], | |
'content_types': [ | |
{"name": "Article", "emoji": "๐ฐ"}, {"name": "Blog post", "emoji": "๐"}, | |
{"name": "Guide", "emoji": "๐"}, {"name": "Email", "emoji": "๐ง"}, | |
{"name": "Summary", "emoji": "๐"}, {"name": "Story", "emoji": "๐"}, | |
{"name": "Essay", "emoji": "๐"}, {"name": "Review", "emoji": "โญ"}, | |
{"name": "Tutorial", "emoji": "๐จโ๐ซ"}, {"name": "Report", "emoji": "๐"}, | |
{"name": "Plan", "emoji": "๐"}, {"name": "Script", "emoji": "๐ฌ"} | |
], | |
'audiences': [ | |
{"name": "Beginners", "emoji": "๐ฑ"}, {"name": "Experts", "emoji": "๐ง "}, | |
{"name": "Students", "emoji": "๐"}, {"name": "Professionals", "emoji": "๐"}, | |
{"name": "Business Owners", "emoji": "๐ผ"}, {"name": "General Public", "emoji": "๐ฅ"}, | |
{"name": "Developers", "emoji": "๐ป"}, {"name": "Children", "emoji": "๐ถ"} | |
], | |
'formats': [ | |
{"name": "Markdown", "emoji": "๐"}, {"name": "HTML", "emoji": "๐"}, | |
{"name": "Plain Text", "emoji": "๐"}, {"name": "JSON", "emoji": "๐"}, | |
{"name": "PDF", "emoji": "๐"}, {"name": "Python Code", "emoji": "๐"}, | |
{"name": "JavaScript", "emoji": "๐"}, {"name": "SQL Query", "emoji": "๐พ"} | |
] | |
} | |
# Function to create a row of buttons for a category | |
def create_horizontal_button_row(category_name, items, emoji_prefix=""): | |
st.markdown(f'<div class="category-row">', unsafe_allow_html=True) | |
st.markdown(f'<div class="category-label">{emoji_prefix} {category_name}:</div>', unsafe_allow_html=True) | |
st.markdown('<div class="horizontal-buttons">', unsafe_allow_html=True) | |
# Create buttons in streamlit (can't be created inside HTML) | |
for i, item in enumerate(items): | |
key = f"{category_name.lower().replace(' ', '_')}_{i}" | |
is_selected = st.session_state.selections.get(category_name.lower().replace(' ', '_')) == item | |
button_type = "primary" if is_selected else "secondary" | |
if st.button(f"{item['emoji']} {item['name']}", key=key, | |
help=f"Select {item['name']}", | |
type=button_type): | |
st.session_state.selections[category_name.lower().replace(' ', '_')] = item | |
st.experimental_rerun() | |
st.markdown('</div></div>', unsafe_allow_html=True) | |
# Minimal header | |
st.markdown("<h2 style='text-align: center; font-size: 1.2rem;'>๐ง ChatGPT Prompt Generator</h2>", unsafe_allow_html=True) | |
# Main layout with two columns | |
left_col, right_col = st.columns([3, 1]) | |
with left_col: | |
# Create a horizontal row of buttons for each category | |
create_horizontal_button_row("Role", data['roles'], "๐ค") | |
create_horizontal_button_row("Tone", data['tones'], "๐ญ") | |
create_horizontal_button_row("Instruction", data['instructions'], "๐") | |
create_horizontal_button_row("Length", data['lengths'], "๐") | |
create_horizontal_button_row("Content Type", data['content_types'], "๐") | |
create_horizontal_button_row("Audience", data['audiences'], "๐ฅ") | |
create_horizontal_button_row("Format", data['formats'], "๐") | |
# Add text inputs in a row container | |
st.markdown('<div class="category-row">', unsafe_allow_html=True) | |
st.markdown('<div class="category-label">๐ Details:</div>', unsafe_allow_html=True) | |
# Topic input | |
st.session_state.selections['about'] = st.text_input("Topic", | |
value=st.session_state.selections['about'], | |
placeholder="Enter what the content should be about", | |
label_visibility="collapsed") | |
# Two fields in one row | |
col1, col2 = st.columns(2) | |
with col1: | |
st.session_state.selections['inclusion'] = st.text_input("Include", | |
value=st.session_state.selections['inclusion'], | |
placeholder="What to include", | |
label_visibility="collapsed") | |
with col2: | |
st.session_state.selections['exclusion'] = st.text_input("Exclude", | |
value=st.session_state.selections['exclusion'], | |
placeholder="What to exclude", | |
label_visibility="collapsed") | |
# Input data | |
st.session_state.selections['input_data'] = st.text_area("Input Data", | |
value=st.session_state.selections['input_data'], | |
placeholder="Enter any specific information to use", | |
label_visibility="collapsed", | |
height=60) | |
st.markdown('</div>', unsafe_allow_html=True) | |
with right_col: | |
# Generate prompt based on selections | |
is_complete = all([ | |
st.session_state.selections['role'], st.session_state.selections['tone'], | |
st.session_state.selections['instruction'], st.session_state.selections['length'], | |
st.session_state.selections['content_type'], st.session_state.selections['audience'], | |
st.session_state.selections['format'], st.session_state.selections['about'] | |
]) | |
prompt = "" | |
if is_complete: | |
sel = st.session_state.selections | |
prompt = f"""Act as a {sel['role']['emoji']} {sel['role']['name']}, use {sel['tone']['emoji']} {sel['tone']['name']} tone, {sel['instruction']['emoji']} {sel['instruction']['name']} a {sel['length']['emoji']} {sel['length']['name']} {sel['content_type']['emoji']} {sel['content_type']['name']} for {sel['audience']['emoji']} {sel['audience']['name']}. | |
It should be about {sel['about']}.""" | |
if sel['inclusion']: | |
prompt += f"\nInclude {sel['inclusion']}." | |
if sel['exclusion']: | |
prompt += f"\nExclude {sel['exclusion']}." | |
prompt += f"\n\nReturn the output as {sel['format']['emoji']} {sel['format']['name']}." | |
if sel['input_data']: | |
prompt += f"\nUse the following information: {sel['input_data']}" | |
else: | |
prompt = "Select all required components and provide a topic." | |
# Display the generated prompt | |
st.markdown('<div class="category-row">', unsafe_allow_html=True) | |
st.markdown('<div class="category-label">๐ฎ Generated Prompt:</div>', unsafe_allow_html=True) | |
st.markdown('<div class="prompt-display">', unsafe_allow_html=True) | |
st.write(prompt) | |
st.markdown('</div>', unsafe_allow_html=True) | |
# Action buttons in a row | |
col1, col2, col3 = st.columns(3) | |
with col1: | |
if st.button("๐ Copy", type="primary", use_container_width=True): | |
st.code(prompt, language="") | |
with col2: | |
if st.button("๐ Reset", type="secondary", use_container_width=True): | |
for key in st.session_state.selections: | |
if key in ['about', 'inclusion', 'exclusion', 'input_data']: | |
st.session_state.selections[key] = "" | |
else: | |
st.session_state.selections[key] = None | |
st.experimental_rerun() | |
with col3: | |
if st.button("๐ฒ Random", type="secondary", use_container_width=True): | |
for category in ['role', 'tone', 'instruction', 'length', 'content_type', 'audience', 'format']: | |
st.session_state.selections[category] = random.choice(data[category+'s']) | |
st.experimental_rerun() | |
st.markdown('</div>', unsafe_allow_html=True) | |
# Sample prompts and structure guide | |
st.markdown('<div class="category-row">', unsafe_allow_html=True) | |
st.markdown('<div class="category-label">๐ Examples:</div>', unsafe_allow_html=True) | |
st.markdown(""" | |
<div style="background-color: #e6f3ff; border: 1px solid #b8daff; border-radius: 4px; padding: 4px; margin-bottom: 4px; font-size: 0.7em;"> | |
<b>๐จโ๐ซ Teaching</b><pre style="white-space: pre-wrap; font-size: 0.75em; margin: 2px 0px;">Act as a ๐จโ๐ซ Teacher, use ๐ Informative tone, Create a ๐ Guide for ๐ฑ Beginners. | |
It should be about Git. | |
Include practical examples. | |
Exclude advanced techniques. | |
Return as ๐ Markdown.</pre> | |
</div> | |
<div style="background-color: #e6ffed; border: 1px solid #b8e6cc; border-radius: 4px; padding: 4px; margin-bottom: 4px; font-size: 0.7em;"> | |
<b>๐ผ Business</b><pre style="white-space: pre-wrap; font-size: 0.75em; margin: 2px 0px;">Act as a ๐ Professional, use ๐ค Persuasive tone, Write a ๐ง Email for ๐ฉโ๐ผ Executives. | |
It should be about a product launch. | |
Include ROI metrics. | |
Exclude technical details. | |
Return as ๐ Plain Text.</pre> | |
</div> | |
<div style="font-size: 0.7em; background-color: #f1f8ff; border-radius: 4px; padding: 4px; margin-top: 4px;"> | |
<b>Structure:</b><br> | |
Act as [<span style="color:blue">ROLE</span>], use [<span style="color:green">TONE</span>] tone, [<span style="color:red">INSTRUCTION</span>] a [<span style="color:purple">LENGTH</span>] [<span style="color:orange">CONTENT TYPE</span>] for [<span style="color:pink">AUDIENCE</span>].<br> | |
It should be about [TOPIC].<br> | |
Include [INCLUSION]. Exclude [EXCLUSION].<br> | |
Return as [FORMAT]. | |
</div> | |
""", unsafe_allow_html=True) | |
st.markdown('</div>', unsafe_allow_html=True) |