storedproc-react.py

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}")

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.