Skip to content

Instantly share code, notes, and snippets.

@ranfysvalle02
Last active August 22, 2024 03:51
Show Gist options
  • Save ranfysvalle02/b58e3e7cdb4d1a3099e29209c0e71ed3 to your computer and use it in GitHub Desktop.
Save ranfysvalle02/b58e3e7cdb4d1a3099e29209c0e71ed3 to your computer and use it in GitHub Desktop.
from openai import AzureOpenAI
import os
import subprocess
import json
from shutil import rmtree
# Azure OpenAI configuration
azure_openai_endpoint = os.getenv('OPENAI_AZURE_ENDPOINT', '')
azure_openai_api_key = os.getenv('OPENAI_API_KEY', '')
azure_openai_deployment_id = ''
client = AzureOpenAI(
azure_endpoint=azure_openai_endpoint,
api_version="2023-07-01-preview",
api_key=azure_openai_api_key
)
sample_code = """
```stored procedure in SQL Server```
CREATE PROCEDURE sp_InsertUser
@FirstName NVARCHAR(50),
@LastName NVARCHAR(50),
@Email NVARCHAR(100),
@Password NVARCHAR(100),
@DateOfBirth DATE
AS
BEGIN
INSERT INTO Users(FirstName, LastName, Email, Password, DateOfBirth)
VALUES (@FirstName, @LastName, @Email, @Password, @DateOfBirth)
END
"""
ai_msg = client.chat.completions.create(
model=azure_openai_deployment_id,
messages=[
{"role": "system", "content": "You are a helpful assistant. You are an expert converting ORACLE FORMS into HTML/JS/CSS specifically in React."},
{"role": "user", "content": "Given this provided code :```\n\n"+sample_code+"""\n```\n
Write a JSON array of objects representing the components in the provided code.
important! think critically and step by step!
carefully analyze the provided coded and then write a JSON array of objects representing the components in the provided code.
[response criteria]
JSON array of objects under the key `components`, each representing a react component with the following keys:
* `id`: The ID of the component.
* `name`: The name of the component.
* `description`: The description of the component and its functionality.
* `smallReactComponent`: A small react component that can be used in the App.tsx file.
"""
}
],
response_format={ "type": "json_object" }
)
demo_result = ai_msg.choices[0].message.content
print(demo_result)
ai_msg = client.chat.completions.create(
model=azure_openai_deployment_id,
messages=[
{"role": "system", "content": "You are a helpful assistant. You are an expert React developer who is highly capable in building modern and minimalistic user interfaces."},
{"role": "user", "content": "Given this collection of small react components:\n\n"+str(demo_result)+"""\n\n
Generate a cohesive, fully functional App.tsx file from the provided collection of small react components.
You have react-bootstrap. And you are an expert at CSS. Think critically and step by step.
[response criteria]
Return the entire App.tsx contents as part of a JSON response under the key `app`.
Return the entire App.css contents as part of a JSON response under the key `css`.
CSS must be MongoDB-themed.
Include a <p> element with the text "Hello, World!" in the App.tsx file.
Include a <p> element with text explaining how to use App.tsx.
Put all the components directly into App.tsx. !IMPORTANT!
[end response criteria]
## IMPORTANT! MUST BE VALID JSON!
EVERYTHING HAS TO BE IN JUST TWO FILES [App.tsx, App.css]
Keep in mind, this was the original provided code:
\n
```"""+sample_code+"""\n```
Using all the information provided, build the best possible App.tsx file.
"""
},
],
response_format={ "type": "json_object" }
)
demo_result = json.loads(ai_msg.choices[0].message.content)
print("========")
print(demo_result)
dir_name = 'demo'
# Try to remove the 'demo' directory if it exists
try:
if os.path.exists(dir_name):
rmtree(dir_name)
print(f"Directory '{dir_name}' emptied successfully.")
except OSError as e:
print(f"Error emptying directory '{dir_name}': {e}")
# Create the 'demo' directory with `exist_ok=True`
os.makedirs(dir_name, exist_ok=True)
# Change the current working directory
os.chdir(dir_name)
# Try to create the Vite app using npx
try:
subprocess.run(["npx", "create-vite", ".", "--template", "react-ts"], check=True)
print("Vite application created successfully.")
except subprocess.CalledProcessError as e:
print(f"Error creating Vite app: {e}")
# Try to overwrite App.tsx
try:
with open("src/App.tsx", "w") as file:
file.write(str(demo_result["app"]))
print("App.tsx overwritten successfully.")
except FileNotFoundError as e:
print(f"Error overwriting App.tsx: File not found ({e})")
except Exception as e: # Catch generic exceptions
print(f"Unexpected error overwriting App.tsx: {e}")
# Try to overwrite App.css
try:
with open("src/App.css", "w") as file:
file.write(str(demo_result["css"]))
print("App.css overwritten successfully.")
except FileNotFoundError as e:
print(f"Error overwriting App.css: File not found ({e})")
except Exception as e: # Catch generic exceptions
print(f"Unexpected error overwriting App.css: {e}")
# Install Bootstrap and React-Bootstrap using npm
try:
subprocess.run(["npm", "install", "bootstrap", "react-bootstrap"], check=True)
print("Bootstrap and React-Bootstrap installed successfully.")
except subprocess.CalledProcessError as e:
print(f"Error installing dependencies: {e}")
# Run npm run dev
try:
subprocess.run(["npm", "run", "dev"], check=True)
print("Development server started successfully.")
except subprocess.CalledProcessError as e:
print(f"Error starting development server: {e}")
@ranfysvalle02
Copy link
Author

GPT4o supports structured JSON output.

Today I decided to play with it a bit, the results were pretty cool

**No Function-Calling; Just orchestration

SUPER HACKY -- just an experiment**

Potential Problems:

  • Lost in the Middle
  • Model laziness
  • Ambiguity
  • More

As of recently, I've been questioning the "intelligence" of these models without any context augmentation.

Function-calling and function-calling libraries add overhead that is not always as controllable as I like for building solutions.

By moving the 'planning/orchestration' back to human/developer control, and leveraging things like response_format={"type":"json_object"} we can get a lot of the benefits of function-calling, and retain some of the control in the automation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment