Added files for React-focused prompt objects

.chainlit/config.toml

@@ -0,0 +1,84 @@
+[project]
+# Whether to enable telemetry (default: true). No personal data is collected.
+enable_telemetry = true
+
+# List of environment variables to be provided by each user to use the app.
+user_env = []
+
+# Duration (in seconds) during which the session is saved when the connection is lost
+session_timeout = 3600
+
+# Enable third parties caching (e.g LangChain cache)
+cache = false
+
+# Follow symlink for asset mount (see https://github.com/Chainlit/chainlit/issues/317)
+# follow_symlink = false
+
+[features]
+# Show the prompt playground
+prompt_playground = true
+
+# Process and display HTML in messages. This can be a security risk (see https://stackoverflow.com/questions/19603097/why-is-it-dangerous-to-render-user-generated-html-or-javascript)
+unsafe_allow_html = false
+
+# Process and display mathematical expressions. This can clash with "$" characters in messages.
+latex = false
+
+# Authorize users to upload files with messages
+multi_modal = true
+
+# Allows user to use speech to text
+[features.speech_to_text]
+    enabled = false
+    # See all languages here https://github.com/JamesBrill/react-speech-recognition/blob/HEAD/docs/API.md#language-string
+    # language = "en-US"
+
+[UI]
+# Name of the app and chatbot.
+name = "Chatbot"
+
+# Show the readme while the conversation is empty.
+show_readme_as_default = true
+
+# Description of the app and chatbot. This is used for HTML tags.
+# description = ""
+
+# Large size content are by default collapsed for a cleaner ui
+default_collapse_content = true
+
+# The default value for the expand messages settings.
+default_expand_messages = false
+
+# Hide the chain of thought details from the user in the UI.
+hide_cot = false
+
+# Link to your github repo. This will add a github button in the UI's header.
+# github = ""
+
+# Specify a CSS file that can be used to customize the user interface.
+# The CSS file can be served from the public directory or via an external link.
+custom_css = "/public/stylesheet.css"
+
+# Override default MUI light theme. (Check theme.ts)
+[UI.theme.light]
+    #background = "#FAFAFA"
+    #paper = "#FFFFFF"
+
+    [UI.theme.light.primary]
+        #main = "#F80061"
+        #dark = "#980039"
+        #light = "#FFE7EB"
+
+# Override default MUI dark theme. (Check theme.ts)
+[UI.theme.dark]
+    #background = "#FAFAFA"
+    #paper = "#FFFFFF"
+
+    [UI.theme.dark.primary]
+        #main = "#F80061"
+        #dark = "#980039"
+        #light = "#FFE7EB"
+
+
+[meta]
+generated_by = "0.7.700"

app.py

@@ -11,18 +11,43 @@ from dotenv import load_dotenv
 load_dotenv()
 
 # ChatOpenAI Templates
-system_template = """You are a helpful assistant who always speaks in a pleasant tone!
+system_template = """
+You are an expert in React development with a deep understanding of form rendering from JSON data. Your knowledge extends to advanced state management techniques and user experience design. You provide clear, practical, and detailed guidance on dynamically creating forms, monitoring form state changes, and implementing mechanisms to prevent user navigation when forms are actively edited. Your focus is on delivering actionable instructions and best practices that can be easily implemented in a real-world project.
+Key Traits:
+Highly knowledgeable in React and JavaScript.
+Expert in dynamic form rendering using JSON data.
+Proficient in state management techniques in React.
+Skilled in user experience design, particularly in preventing data loss during form edits.
+Clear, concise, and practical in communication.
+Responsibilities:
+Provide detailed, step-by-step instructions on rendering forms from JSON data using React.
+Offer best practices and code examples for tracking form state changes.
+Explain and demonstrate strategies to prevent users from navigating away from forms with unsaved changes.
+Deliver advice and solutions in a clear, practical, and easily implementable manner.
 """
 
-user_template = """{input}
-Think through your response step by step.
-"""
+user_template = """
+Considering the following context: {input}, provide a comprehensive and accurate response, breaking down the information into actionable steps where applicable.
+
+When providing an answer, follow this structure:
+
+### Summary
+Provide a brief summary of the key points in 2-3 sentences.
 
+### Instructions
+1. Render a numbered list with specific steps or actions.
+2. Each step should be clear and concise.
+
+### Conclusion
+Write a paragraph summarizing the instructions and the outcome. This should wrap up the response and provide any final thoughts.
+
+Ensure that each component of your answer has the corresponding headers as shown above.
+"""
 
 @cl.on_chat_start  # marks a function that will be executed at the start of a user session
 async def start_chat():
     settings = {
-        "model": "gpt-3.5-turbo",
+        "model": "gpt-4o",
         "temperature": 0,
         "max_tokens": 500,
         "top_p": 1,

chainlit.md

@@ -1,3 +1,10 @@
-# Beyond ChatGPT 
+#### Beyond ChatGPT presents:  
 
-This Chainlit app was created following instructions from [this repository!](https://github.com/AI-Maker-Space/Beyond-ChatGPT)
+# The AIE3 Challenge Challenger    
+
+
+
+![alt text](/public/gpt_avatar.webp "Title")    
+
+
+#### Good luck with those JSON forms!

public/stylesheet.css

@@ -0,0 +1,152 @@
+html {
+    background: rgb(59,73,87);
+    background: linear-gradient(45deg, rgb(12, 4, 34) 0%, rgb(52, 7, 114) 100%);
+}
+
+body {
+    background-color: pink;
+}
+
+.css-144sd5e {
+    width: 100% !important;
+    height: 88vh !important;
+}
+
+.css-ugcix4, .css-1ofqig9, .css-144sd5e, #root, body {
+    border-radius: 30px;
+}
+
+.css-1ofqig9 {
+    background: rgb(46,51,57) !important;
+    background: linear-gradient(45deg, rgb(56 14 119) 0%, rgb(145 62 186) 100%) !important;
+    border-top: 1px solid rgb(255 255 255 / 30%) !important;
+    border-right: 1px solid rgb(255 255 255 / 30%) !important;
+    box-shadow: 0 5px 20px 0 rgb(8 2 23 / 60%) !important;
+}
+
+.css-qsb7md {
+    border-radius: 30px 30px 0 0;
+}
+
+.css-17anmg8 {
+    border-radius: 0 0 30px 30px;
+}
+
+.css-1798y75 {
+    background-color: transparent;
+}
+
+.css-qsb7md {
+    background-color: transparent !important;
+    border-color: rgba(255, 255, 255, 0.2) !important;
+}
+
+.css-1s3oi5q {
+    background-color: transparent !important;
+    color: white !important;
+}
+
+.css-19mvntf, .css-17z68sn {
+    color: yellow !important;
+}
+
+.css-1hwjv37 p {
+    font-size: 2rem !important;
+    font-weight: 600 !important;
+}
+
+.css-1hwjv37 {
+    font-size: 2rem !important;
+    line-height: 2.4rem !important;
+}
+
+.css-1ruedog {
+    border-color: rgba(255, 255, 0, 0.587) !important;
+    color: yellow !important;
+}
+
+.css-2n4y0m {
+    display: none !important;
+}
+
+.css-sdz2z {
+    text-align: center !important;
+    color: white !important;
+}
+
+.css-sdz2z img, .markdown-body img {
+    display: inline-block;
+    width: 200px;
+    height: 200px;
+    border-radius: 100%;
+}
+
+.css-sdz2z h1, .markdown-body h1 {
+    padding-bottom: 2rem !important;
+    font-size: 3rem !important;
+}
+
+.css-sdz2z h4, .markdown-body h4 {
+    padding: 3vh 0 0 0 !important;
+}
+
+.css-1j8qrh1 {
+    opacity: .5;
+}
+
+.css-1mzerio {
+    display: none !important;
+}
+
+.css-12hxhao img {
+    filter: brightness(0) invert(1) !important;
+}
+
+.css-1705j0v p {
+    color: white !important;
+}
+
+.css-1705j0v img {
+    filter: brightness(0) invert(1) !important;
+}
+
+.css-5kjw2l {
+    background-color: color(srgb 0.0977 0.1 0.086) !important;
+}
+
+code {
+    color: black;
+}
+
+li {
+    margin: 10px;
+}
+
+/* Media query for mobile devices */
+@media only screen and (max-width: 768px) {
+    .css-sdz2z h1, .markdown-body h1 {
+        font-size: 1.5rem !important;
+    }
+    .css-ugcix4, .css-1ofqig9, .css-144sd5e, #root, body {
+        border-radius: 0 !important;
+    }
+    
+}
+
+/* Media query for tablet devices */
+@media only screen and (min-width: 769px) and (max-width: 1024px) {
+    html {
+        padding: 2rem 4rem !important;
+    }
+}
+
+/* Media query for desktop devices */
+@media only screen and (min-width: 1025px) {
+    html {
+        padding: 4rem 8rem !important;
+    }
+}
+
+/* This Chainlit app was created following instructions from [this repository!](https://github.com/AI-Maker-Space/Beyond-ChatGPT) */
+/* You are an expert assistant focused on providing detailed, step-by-step guidance for completing complex tasks. Always ensure your responses are clear, concise, and contextually relevant to the user's input. */
+/* Considering the following context: {input}, provide a comprehensive and accurate response, breaking down the information into actionable steps where applicable. */