Convo: a conversational programming language

Community
,
1

Convo is a high-level, conversational programming language designed to be interpreted by Generative AI models. It allows developers to write code in plain, natural language, making programming more accessible and intuitive. You can think of Convo as high-level pseudocode that describes the “gist” of a program, which a Large Language Model (LLM) can then translate into specific programming languages like Python, JavaScript, or any other language.

The idea is that as LLM’s improve coding wise you can simply re-port your Convo programs to a target language using the newer version of the model.

Here’s an example snake game in Convo:

Section: Game Setup

Create a grid with 20 rows and 20 columns.
Create a snake starting at the center of the grid with a length of 3.
Set the initial direction of the snake to "right".
Place a food item randomly on the grid.

Section: Game Loop

While the game is running,
    Display the grid with the snake and food.
    Ask the user for the direction (up, down, left, right).
    If the direction is valid, then
        Update the snake's direction to the user's input.
    Move the snake in the current direction.
    If the snake eats the food, then
        Increase the snake's length by 1.
        Place a new food item randomly on the grid.
    If the snake collides with itself or the wall, then
        End the game and display "Game Over! Your score is [snake's length]."

Section: Functions

To display the grid with the snake and food,
    Clear the screen.
    For each cell in the grid,
        If the cell contains a part of the snake, then
            Display "S".
        Else if the cell contains food, then
            Display "F".
        Else
            Display ".".

To move the snake in the current direction,
    Calculate the new head position based on the current direction.
    Add the new head position to the snake.
    Remove the last part of the snake unless it has just eaten food.

To place a food item randomly on the grid,
    Choose a random empty cell on the grid.
    Place the food item in that cell.

There’s nothing special you need to learn to write to write convo programs. There’s a convo-spec that you append to your prompt which teaches the LLM how to write a convo program and that spec is only needed at program generation time. When porting to a target language the LLM can intuitively follow the program so no spec is needed.

As you can see, convo programs are fairly intuitive and you can make tweaks directly or have the LLM make the tweaks. You can even write them in other languages so convo programs are naturally multilingual.

8 Likes
2

What separates it from plain language instruction?

Edit…

It translated to python quite nice
To make this game work as a simple snake game in Python, ready to copy-paste into an API or script, here’s the complete code. This uses Python’s basic functionality, including libraries like random and os for handling random food placement and clearing the console for updates. If you are running this in an environment without access to a console (such as a web-based API), some modifications would be needed for the display.

Here’s the code:

import random
import os
import sys
import time

# Initialize grid dimensions
GRID_SIZE = 20

# Directions mapping
DIRECTIONS = {
    "up": (-1, 0),
    "down": (1, 0),
    "left": (0, -1),
    "right": (0, 1)
}

def clear_screen():
    """Clears the console for grid display."""
    os.system('cls' if os.name == 'nt' else 'clear')

def create_grid():
    """Creates an empty grid of the specified size."""
    return [["." for _ in range(GRID_SIZE)] for _ in range(GRID_SIZE)]

def place_food(grid, snake):
    """Places food in a random empty spot on the grid."""
    while True:
        x, y = random.randint(0, GRID_SIZE-1), random.randint(0, GRID_SIZE-1)
        if (x, y) not in snake:
            grid[x][y] = "F"
            return (x, y)

def display_grid(grid):
    """Displays the current state of the grid."""
    for row in grid:
        print(" ".join(row))
    print("\n")

def move_snake(snake, direction):
    """Moves the snake in the current direction."""
    head_x, head_y = snake[0]
    delta_x, delta_y = DIRECTIONS[direction]
    new_head = (head_x + delta_x, head_y + delta_y)
    snake.insert(0, new_head)
    return new_head

def is_collision(snake, new_head):
    """Checks if the snake has collided with walls or itself."""
    x, y = new_head
    # Check for wall collision
    if x < 0 or x >= GRID_SIZE or y < 0 or y >= GRID_SIZE:
        return True
    # Check for self-collision
    if new_head in snake[1:]:
        return True
    return False

def game_over(snake):
    """Displays the game over message and the final score."""
    print(f"Game Over! Your score is {len(snake)}")
    sys.exit()

def main():
    # Initial game setup
    grid = create_grid()
    snake = [(GRID_SIZE // 2, GRID_SIZE // 2)]  # Snake starts in the center
    direction = "right"
    food_position = place_food(grid, snake)

    # Game loop
    while True:
        clear_screen()
        grid = create_grid()  # Reset grid

        # Update the grid with the snake
        for x, y in snake:
            grid[x][y] = "S"
        grid[food_position[0]][food_position[1]] = "F"

        # Display the grid
        display_grid(grid)

        # Get user input for the new direction
        new_direction = input("Enter direction (up, down, left, right): ").lower()
        if new_direction in DIRECTIONS:
            direction = new_direction

        # Move the snake
        new_head = move_snake(snake, direction)

        # Check for collisions
        if is_collision(snake, new_head):
            game_over(snake)

        # Check if the snake has eaten the food
        if new_head == food_position:
            food_position = place_food(grid, snake)  # Place new food
        else:
            snake.pop()  # Remove the tail if food was not eaten

        # Slow down the loop for better visibility
        time.sleep(0.1)

if __name__ == "__main__":
    main()

Key Features:

  1. Grid Creation: The create_grid() function initializes a 20x20 grid.
  2. Snake Initialization: The snake starts in the center with a length of 1.
  3. Food Placement: Food is placed randomly on an empty cell.
  4. Game Loop: The game loop:
    • Clears and redisplays the grid.
    • Moves the snake according to user input.
    • Checks for collisions (with walls or itself).
    • Updates the snake’s position and places new food when eaten.
  5. Input Handling: The player can enter up, down, left, or right to control the snake’s movement.
  6. Collision Detection: If the snake hits the wall or itself, the game ends with a score.

How to Run:

  • If using this in a local environment, simply copy-paste into a Python script and run it.
  • If you’re integrating this into an API, replace the input() function with appropriate API request handling for receiving directions. Also, replace the console display with appropriate outputs (e.g., JSON responses).
3 Likes
3

If you just say “create the game snake using python” you’re leaving a lot of wiggle room for the LLM to decide how it wants to approach writing the game.

This is just english (or spanish or any other language) but it formalizes every detail about how the LLM should approach writing the program. You’re basically creating a program specification.

To write the convo version of snake above I did in fact just say “create the game snake using convo” and I attached the spec to my prompt. This basically forced the LLM to write the game as pseudocode. You would then edit the generated convo program before submitting it to the llm for conversion into python.

This essentially lets you inject yourself between the steps of the llm going from “create the game snake” and “using python”

3 Likes
4

And you’ll get roughly the same exact program if you ask for it as HTML+JavaScript.

1 Like
5

Yes but I can describe it as plain language instruction. It is not as simple as “make snake game in python” you can go into great detail just using simple programing structures with plain language… I did not ask you such a simple question… I get it’s not as simple as just telling a machine to “make it”… it is very nice though as a structure.

6

You may find this cool. I enjoy plain language structure programming… I call it code dropping because it can be done in chat… This is something I threw together in BASIC if you understand code structure you can do amazing things with plain language even old code. It is truly amazing how code is becoming just language with logic.
https://community.openai.com/t/b-a-s-i-c-ai-the-walk-down-memory-lane/955025?u=mitchell_d00

1 Like
7

At the end of the day you are just calling the model with a bunch of English statements. So you can totally argue that you can skip the step of going through convo but the goal of convo is really to generate that more detailed English description you’d send to the model.

For example… I gave o1 this prompt:

Use convo to create a mobile app for creating generative images. it needs a signup screen, a feed for viewing the images and talking to the assistant, and a gallery for viewing all of the images a user has created. Give everything a modern style and detail how every screen needs to work.

And I got the convo app below out… You can now pass that to the model and have it write the code for each screen one by one. Yes you could have typed all of that as its just english instructions to the model but this saves time. This is just the “design spec” phase of traditional software development.

Section: Styles

Define a style called "ModernButton" with background color "#007AFF", text color white, font size 18, padding 10, and rounded corners.
Define a style called "ModernInput" with border color "#C7C7CC", padding 15, font size 16, border width 1, and rounded corners.
Define a style called "ModernLabel" with font size 16, color "#333333".
Define a style called "ModernTitle" with font size 28, color "#000000", and bold.
Define a style called "ModernImage" with width 100%, height auto, and margin 10.
Define a style called "NavigationBar" with background color white, border color "#C7C7CC", border width 1, and height 50.
Define a style called "TabButton" with font size 16, color "#007AFF", padding 10.

Section: Resources

Define an image called "AppLogo" with the file path "images/app_logo.png".

Section: Signup Screen

Display the "SignupScreen".

In the "SignupScreen":

Display the "AppLogo" image at the top center.

Display "Welcome to GenImage!" applying the "ModernTitle" style and center alignment.

Ask the user for their email address, using an input field styled with "ModernInput" and placeholder "Email Address".

Ask the user for a password, using a password input field styled with "ModernInput" and placeholder "Password".

Create a button labeled "Sign Up" applying the "ModernButton" style and center alignment.

When the "Sign Up" button is tapped:
    Attempt to create a new user account with the provided email and password.
    If that succeeds:
        Navigate to the "FeedScreen".
    If that fails:
        Display an error message "Signup failed. Please try again." applying the "ModernLabel" style and red color.

Create a label "Already have an account? Sign In" applying the "ModernLabel" style and center alignment.

When the label is tapped:
    Navigate to the "LoginScreen".

Section: Login Screen

In the "LoginScreen":

Display the "AppLogo" image at the top center.

Display "Welcome Back!" applying the "ModernTitle" style and center alignment.

Ask the user for their email address, using an input field styled with "ModernInput" and placeholder "Email Address".

Ask the user for their password, using a password input field styled with "ModernInput" and placeholder "Password".

Create a button labeled "Sign In" applying the "ModernButton" style and center alignment.

When the "Sign In" button is tapped:
    Attempt to sign in with the provided email and password.
    If that succeeds:
        Navigate to the "FeedScreen".
    If that fails:
        Display an error message "Login failed. Please try again." applying the "ModernLabel" style and red color.

Create a label "Don't have an account? Sign Up" applying the "ModernLabel" style and center alignment.

When the label is tapped:
    Navigate to the "SignupScreen".

Section: Feed Screen

In the "FeedScreen":

Display a navigation bar at the bottom applying the "NavigationBar" style.

Create three tab buttons labeled "Feed", "Gallery", and "Assistant" applying the "TabButton" style.

Display a scrollable list of images generated by users, each styled with "ModernImage".

For each image in the feed:
    Display the image.
    Display the username of the creator applying the "ModernLabel" style.
    Create a like button with a heart icon.
    When the like button is tapped:
        Toggle the like status for the image.

At the top right, create a button with a "+" icon applying the "ModernButton" style.

When the "+" button is tapped:
    Navigate to the "ImageGenerationScreen".

Section: Image Generation Screen

In the "ImageGenerationScreen":

Display "Create a Generative Image" applying the "ModernTitle" style and center alignment.

Ask the user to enter a description of the image they want to generate, using an input field styled with "ModernInput" and placeholder "Describe your image...".

Create a button labeled "Generate Image" applying the "ModernButton" style and center alignment.

When the "Generate Image" button is tapped:
    Use the description to generate a new image called "GeneratedImage".
    Display a loading indicator while the image is being generated.
    When "GeneratedImage" is ready:
        Display "GeneratedImage" on the screen styled with "ModernImage".

Create a button labeled "Save to Gallery" applying the "ModernButton" style and center alignment.

When the "Save to Gallery" button is tapped:
    Save "GeneratedImage" to the user's gallery.
    Display a confirmation message "Image saved to your gallery!" applying the "ModernLabel" style and green color.

Section: Gallery Screen

In the "GalleryScreen":

Display a navigation bar at the bottom applying the "NavigationBar" style.

Create three tab buttons labeled "Feed", "Gallery", and "Assistant" applying the "TabButton" style.

Display a grid of images from the user's gallery, each styled with "ModernImage".

For each image in the gallery:
    When the image is tapped:
        Navigate to the "ImageDetailScreen" displaying the full-size image.

Section: Image Detail Screen

In the "ImageDetailScreen":

Display the selected image in full size styled with "ModernImage".

Create a button labeled "Delete Image" applying the "ModernButton" style.

When the "Delete Image" button is tapped:
    Remove the image from the user's gallery.
    Navigate back to the "GalleryScreen".

Section: Assistant Screen

In the "AssistantScreen":

Display a navigation bar at the bottom applying the "NavigationBar" style.

Create three tab buttons labeled "Feed", "Gallery", and "Assistant" applying the "TabButton" style.

Display "Chat with Assistant" applying the "ModernTitle" style and center alignment.

Display a scrollable conversation area showing messages between the user and the assistant, styled with "ModernLabel".

At the bottom, create an input field for the user to type messages, styled with "ModernInput" and placeholder "Type your message...".

Create a button labeled "Send" applying the "ModernButton" style.

When the "Send" button is tapped:
    Send the user's message to the assistant.
    Display the assistant's response in the conversation area.

Section: Navigation

On any screen, the user can use the navigation bar to switch between "FeedScreen", "GalleryScreen", and "AssistantScreen".

When the "Feed" tab is tapped:
    Navigate to the "FeedScreen".

When the "Gallery" tab is tapped:
    Navigate to the "GalleryScreen".

When the "Assistant" tab is tapped:
    Navigate to the "AssistantScreen".

Section: Authentication

If the user is not logged in:
    Always navigate to the "SignupScreen" or "LoginScreen".

Section: Data Handling

All images generated by the user are saved to their personal gallery.

The feed displays images from all users, ordered by the most recent.

Section: Error Handling

If any action fails (e.g., network error, authentication error):
    Display an error message in a popup applying the "ModernLabel" style with red color.

Section: Security

Ensure all user data is securely transmitted using encryption and stored safely.

Section: Concurrency

Allow the app to download new images in the background while the user is browsing.

Section: Generative Images

When generating images:

Use the user's description to create a generative image using AI algorithms.

Allow the user to regenerate the image if they are not satisfied.

Section: Notifications

Send push notifications to the user when:

- New images are available in the feed.
- Someone likes their image.

Section: Settings

In the "SettingsScreen":

Allow the user to:

- Edit their profile information.
- Change their password.
- Log out of the app.

Explanation of How Each Screen Works:

Signup Screen:

  • Purpose: Allows new users to create an account.
  • Components:
    • App Logo: Positioned at the top center for branding.
    • Welcome Message: “Welcome to GenImage!” using the “ModernTitle” style for emphasis.
    • Email and Password Fields: Styled with “ModernInput” and placeholders for guidance.
    • Sign Up Button: Centered, uses “ModernButton” style for a modern look.
    • Sign In Label: Provides navigation to the login screen.
  • Functionality:
    • Validates user input and provides feedback if signup fails.
    • Navigates to the Feed Screen upon successful signup.
    • Error messages are displayed in red to catch the user’s attention.

Login Screen:

  • Purpose: Allows existing users to sign in to their account.
  • Components:
    • Similar layout to the Signup Screen for consistency.
    • “Welcome Back!” message to greet returning users.
    • Sign In Button: Attempts to authenticate the user.
    • Sign Up Label: Redirects new users to the signup process.
  • Functionality:
    • Authenticates user credentials.
    • Error handling for failed login attempts.

Feed Screen:

  • Purpose: Main hub where users view images from all users and interact.
  • Components:
    • Navigation Bar: Persistent at the bottom for easy access to main sections.
    • Tab Buttons: “Feed”, “Gallery”, “Assistant” for navigation.
    • Image Feed: Scrollable list of images with usernames and like buttons.
    • New Image Button: “+” icon to create a new image.
  • Functionality:
    • Displays images in a modern, clean layout.
    • Users can like images, which updates the like status.
    • Tapping the “+” button opens the Image Generation Screen.

Image Generation Screen:

  • Purpose: Interface for users to create new generative images.
  • Components:
    • Title: Encourages the user to create an image.
    • Description Input Field: Where users enter prompts for image generation.
    • Generate Image Button: Initiates the image creation process.
    • Generated Image Display: Shows the result to the user.
    • Save to Gallery Button: Allows users to save the image.
  • Functionality:
    • Uses AI to generate images based on user descriptions.
    • Provides feedback during the image generation process with a loading indicator.
    • Confirms when an image is saved successfully.

Gallery Screen:

  • Purpose: Allows users to view all images they have created.
  • Components:
    • Navigation Bar: Consistent with other screens.
    • Image Grid: Displays thumbnails of the user’s images.
  • Functionality:
    • Tapping an image navigates to the Image Detail Screen.
    • Provides a personal collection space for the user.

Image Detail Screen:

  • Purpose: Displays a selected image in full size.
  • Components:
    • Full-Size Image: Shows the image prominently.
    • Delete Image Button: Allows the user to remove the image from their gallery.
  • Functionality:
    • Confirms deletion and updates the gallery accordingly.

Assistant Screen:

  • Purpose: Provides a chat interface for users to interact with an assistant.
  • Components:
    • Navigation Bar: For consistency.
    • Chat Title: “Chat with Assistant” centered at the top.
    • Conversation Area: Scrollable, displays messages between the user and assistant.
    • Message Input Field: For the user to type messages.
    • Send Button: Sends the user’s message.
  • Functionality:
    • Simulates a real-time conversation.
    • The assistant can help with app features or provide creative ideas.

Navigation:

  • Purpose: Allows users to move between different sections of the app seamlessly.
  • Components:
    • Navigation Bar and Tabs: Persistent across main screens.
  • Functionality:
    • Tapping tabs navigates to the corresponding screen.
    • Ensures a user-friendly experience.

Authentication:

  • Purpose: Ensures only authenticated users can access the main features.
  • Functionality:
    • Redirects unauthenticated users to sign up or log in.
    • Protects user data and app integrity.

Data Handling:

  • Purpose: Manages storage and retrieval of user-generated images.
  • Functionality:
    • Saves images to the user’s gallery securely.
    • Updates the feed in real-time with new images.

Error Handling:

  • Purpose: Provides feedback to the user when actions fail.
  • Functionality:
    • Error messages are clear and styled to stand out.
    • Guides the user to resolve issues.

Security:

  • Purpose: Protects user data and privacy.
  • Functionality:
    • Implements encryption for data transmission.
    • Safely stores sensitive information.

Concurrency:

  • Purpose: Enhances user experience by performing tasks in the background.
  • Functionality:
    • Downloads new feed images without interrupting user activity.
    • Improves app responsiveness.

Generative Images:

  • Purpose: Core feature for creating images.
  • Functionality:
    • Utilizes AI to generate images from text descriptions.
    • Allows for creative expression.

Notifications:

  • Purpose: Keeps users engaged and informed.
  • Functionality:
    • Notifies users of new activity relevant to them.
    • Can be managed in settings.

Settings Screen:

  • Purpose: Provides user control over their account and preferences.
  • Components:
    • Profile Editing: Update personal information.
    • Password Change: Enhance security.
    • Logout Option: Ends the session securely.
  • Functionality:
    • Ensures users have control over their experience.

Modern Style Elements:

  • Color Scheme: Utilizes a modern palette with blue accents (#007AFF) for interactive elements.
  • Typography: Clean fonts with varying sizes for hierarchy.
  • Buttons and Inputs: Rounded corners and adequate padding for a sleek look.
  • Layout: Centered content with consistent alignment for readability.
  • Icons: Uses universally recognized icons (e.g., heart for like, “+” for new image).

Let me know if you need any further assistance or modifications to the app design.

3 Likes
8

Yes I agree. It I amazing. With GPT builder in ChatGPT plain language instruction is incredibly affective.
This is an example of what I call drop code.
Chat Diary AI Structured Prompt

  1. Record a Diary Entry
  • Ask the user:
    • “What would you like to talk about today?”
    • “How are you feeling?”
  • Store the user’s input as a diary entry with the current date and time.
  1. Organize Entries
  • Tag the entry with relevant emotions or topics (e.g., “Work,” “Happiness”).
  • Optionally, ask the user to add tags:
    • “Do you want to tag this with [suggested topic]?”
  1. Retrieve Past Entries
  • Allow the user to search by:
    • Date: “Show me my entry from [date].”
    • Topic: “What did I write about [topic]?”
    • Emotion: “When did I feel [emotion]?”
  1. Provide Emotional Insights
  • Analyze entries and provide feedback:
    • “You’ve mentioned [emotion] frequently. Do you want to talk about it?”
  1. Reminders
  • Check in with the user:
    • “It’s been a while since your last entry. Do you want to write something?”
  1. Privacy and Security
  • Ensure entries are private and allow users to delete or download their data.
9

Yeah same basic concept to what Convo is doing… The LLM does all of the work and the spec I give you to append to the prompt is just a guide for the LLM with “suggestions” for how it should format the pseudo code it generates…

Convo isn’t any sort of formal programming language but it helps ensure that your spec includes everything the LLM will need decision wise when it comes time to convert your idea into actual code.

1 Like
10

Mine is just my own language I never plan on making a standard like you :heart: I am just happy plain language logic is building ground.

11

Standard is a strong word… More just an approach. For me this is part of this larger SynthOS project I’m working on to build the Star Trek computer.

At the core of SynthOS is an planning agent that’s responsible for interfacing with the user and orchestrating all of its other systems. This central agent needs to essentially program all of its child systems. That got me to thinking, what kind of programs would an AI system write. It could write python or javascript programs but that’s too low level. No… The types of programs an agent would write to control other agents probably look a lot more like natural language instructions so Convos was born :slight_smile:

It just turns out that not only can you use convos to essentially program agents you can also easily transform those programs into more traditional python & javascript programs.

1 Like
12

Someone should write the book. All language starts as local. A standard structure for plain language logic PLL would be a boon. It bridges “build snake game “ as a missing link to “machine language” AI makes that a possibility that was not possible only months ago. :rabbit::honeybee:

1 Like
13

Here’s a great example of using convo… I’ve actually done this before and while it often works the results are fairly inconsistent…

I prompted ChatGPT with:

Using Convo: create an app that lets me upload a csv file and show it as a bar chart.

The generated program spec was this:

Ask the user to upload a CSV file.

Attempt to read the uploaded file as a table. If that fails, display "There was an issue reading the file. Please upload a valid CSV file."

Extract the first two columns of the table, assuming they contain labels and values.

Create a bar chart using the labels from the first column and values from the second column.

Display the bar chart to the user with the title "Data Visualization".

If there are any errors in creating the chart, display "Unable to create the bar chart. Please check the data format."

I then asked ChatGPT to generate an html+javascript app using that spec. Here’s the app it created:

image
image1936×1287 72.1 KB

image
image1936×1287 207 KB

I then asked it to update the program spec to create charts with a cool tron vibe:

Ask the user to upload a CSV file.

Attempt to read the uploaded file as a table. If that fails, display "There was an issue reading the file. Please upload a valid CSV file."

Extract the first two columns of the table, assuming they contain labels and values.

Create a bar chart using the labels from the first column and values from the second column. Style the chart with a "Tron" vibe:

- Set the background color to black.

- Use neon blue and cyan colors for the bars.

- Set the axis lines and labels to glow in neon blue.

- Use a grid with faint neon blue lines for a futuristic look.

Display the bar chart to the user with the title "Data Visualization" styled in a glowing neon blue font.

If there are any errors in creating the chart, display "Unable to create the bar chart. Please check the data format."

Here’s what o1-mini generated:

image
image1759×1246 210 KB

UPDATE…

To show the composability of this stuff (it is all just language) you can define a separate style section that describes a standard look & feel you want:

Section: Styles

Define a style called "Header" with font size 36, color emerald green, bold, and using a sleek, futuristic font.
Define a style called "SubHeader" with font size 24, color lime green, italic, and using a modern sans-serif font.
Define a style called "Button" with background color dark gray, text color neon green, rounded corners with a radius of 8 pixels, and a subtle glow effect.
Define a style called "PrimaryButton" that inherits from "Button" with background color bright green and a stronger glow effect.
Define a style called "TerminalText" with font size 18, color green, and monospace font.
Define a style called "Background" with color black.
Define a style called "Highlight" with border color green, a light green shadow effect, and a semi-transparent overlay.
Define a style called "InputField" with background color dark charcoal, text color green, border color neon green, and rounded corners.
Define a style called "Icon" with color green and a holographic effect.
Define a style called "Tooltip" with background color dark gray, text color green, padding of 5 pixels, and a slight transparency.

Then tack that on to the end of the convo program you’re generating code for and the model will automatically skin the app it generates using the provided styles as inspiration:

image
image1739×1087 101 KB

1 Like
14

image
this is a cool chart, i like the styles of it. nothing to add, just really cool chart in my opinion

2 Likes
15

Back in the day I formatted myspace pages for folks. How you set your headers etc. reminds me of that and GAIA online profile code. You could make a suit like back in the day for template web page design but for GPT structures.

16

It animates too :slight_smile: All GPT…

One thing I’ll note is that even with a fairly detailed style description in English you’ll get variances for how the model applies those styles during each code generation pass…

What I would do for styling specifically would be to use the Convo style definition to generate the style you want as css and then pass the css in with the rest of the program definition.

These models naturally want to just build on the ideas they’re shown so if you show them a skeleton of an app or style to use, they’ll use it.

1 Like
17

Some updates to Convo… I created a Convo GPT that will guide you through creating a convo program and then porting it to python or javascript:

The model is that you can use the Convo GPT to iterate over the convo program (a design spec essentially) until you get it to a point where it defines all of the details the program you want to create. Once you get the convo program (design spec) to a level of detail you like then you can ask the GPT to generate a python or JS version of the program.

You can build really complex apps using just the GPT. I needed to submit an invoice so I built an AI powered invoice builder in convo:

I then used o1 to generate an HTML version of the app:

image
image1894×1329 100 KB

image
image1894×1329 124 KB

image
image1894×1329 122 KB

I had to have o1 fix one or two minor formatting issues using followup queries but everything worked functionally out of the box. It takes a prompt from the user and calls Open AI to generate an invoice and then it saves all my invoices to local storage. I modified zero lines of code manually…

4 Likes
18

So it’s like a large language model?

19

No it’s a programming language that you pass to an LLM to convert to a target language like python or javascript. It’s essentially just pseudocode and the LLM intuitively understands it so LLM’s can convert convo → python just as easily as they can convert javascript → python.

We don’t program directly in assembly language anymore because we created higher level languages like c, python, and javascript. LLM’s let us move up another level in abstraction to where we can just program in pseudocode now.

When you pass the prompt below to an LLM, you’re essentially getting the LLM to transpile the program from pseudocode to python. It can do this task extremely well.

implement the program below using python:

Section: Game Setup

Create a grid with 20 rows and 20 columns.
Create a snake starting at the center of the grid with a length of 3.
Set the initial direction of the snake to "right".
Place a food item randomly on the grid.

Section: Game Loop

While the game is running,
    Display the grid with the snake and food.
    Ask the user for the direction (up, down, left, right).
    If the direction is valid, then
        Update the snake's direction to the user's input.
    Move the snake in the current direction.
    If the snake eats the food, then
        Increase the snake's length by 1.
        Place a new food item randomly on the grid.
    If the snake collides with itself or the wall, then
        End the game and display "Game Over! Your score is [snake's length]."

Section: Functions

To display the grid with the snake and food,
    Clear the screen.
    For each cell in the grid,
        If the cell contains a part of the snake, then
            Display "S".
        Else if the cell contains food, then
            Display "F".
        Else
            Display ".".

To move the snake in the current direction,
    Calculate the new head position based on the current direction.
    Add the new head position to the snake.
    Remove the last part of the snake unless it has just eaten food.

To place a food item randomly on the grid,
    Choose a random empty cell on the grid.
    Place the food item in that cell.
2 Likes
20

So you’re telling me in natural language you can just talk to large language model and it will output code that is relevant to the context and purpose of your conversion. Holy s***. I knew that I was getting advanced but I did not know where we’re at the point that you could talk to a large language model a model of literally composed of massive amounts of language and it could take that language and then extrapolate the next tokens in a predictive statistical like matter that would be able to output code that is functional and to the purposes of and the intent of the user after several hundred thousand and millions of dollars investments in human reinforcement learning training on gpus. And now you’re saying… I can just tell it what I want it’ll make it. Have you heard of lazy AI openai cursor the IDE have you heard of the versatile vo.dev have you seen bolt.new that’s a good one you like that one it’s totally open source you can use it for free with lama locally. But an app that’s so complicated it can take unstructured data and output structured data in the form of some sort of json object like a receipt or a document processed electronically that’s crazy you know it’s brilliant the whole internet is made of forms if you think about it. I’m just messing with you man good job. :sob::sob: