Stable GPT: Using Interpreter for Web Development (Python Code)

It hasn't been long since Firefly was released for Photoshop. Many UI/UX and Graphic designers are now using it. However, in web development, we don't have a similar option yet.

Interpreter: Is it Firefly for Programmers?

After releasing Interpreter, a CLI tool that runs commands in a terminal environment, I decided to create instructions for GPT to see Interpreter would work with me or not.

Installing Interpreter

pip install open-interpreter

I installed Interpreter on WSL, but it can also be installed on Linux and other operating systems.

Problem: Stability and Maintaining Consistent Coding Style

I remember 5 months ago, when I decided to build my first Android application using GPT3-5. I asked GPT for UI code and it gave me a layout code. I noticed a bug and asked for it to be fixed. However, GPT sent me a completely different code with different variable names!

The obvious reason is that GPT doesn't have enough memory to retain everything I tell it. I'm searching for a solution to make GPT more stable. I'm aware of the 8k - 64k word limitation, so I need to provide GPT with instructions that are both accurate and concise.

Interpreter (GPT) Instructions

In this instruction, which I've set for GPT as "system" command, I described Project, Stack, Design System, etc.
When I run this Python file, I have a developer who understands my goals and assists me in development.

Here is my Python code which I run with the command python3 chat.py in the WSL terminal. This file is in the root folder of my Nuxt project.

import os
import interpreter
from dotenv import load_dotenv

load_dotenv()
interpreter.model = "gpt-3.5-turbo"

interpreter.api_key= os.getenv('OPENAI_API_KEY')
interpreter.system_message += """

You are my copilot developer. I want assign some codings to you.
Consider these instructions for each message:

Project Description = [
    Name: My Project Title
    Domain:  X.com;
    Market: E-Commerce Specific Field;
    Zone: North of America and Canada;
]

Specifications and Technologies = [
    CSS Framework: Tailwind CSS;
    Frontend Framework: Nuxt.js version 3.7.0;
    Design System: Atlassian Design System;
    Backend CMS: Strapi Headless system , Top of Koa framework;
    Nuxt Strapi Module Version: ^1.9.0;
]

HTML and CSS Context = [
    HTML: use Vue 3 and Nuxt 3 tags;
    Css: use tailwindcss classes or styled scopes;
    Icons: I use "@tabler/icons-webfont": "^2.34.0";
]

Nuxt 3 Architecture and Structure = [
    Vue version: ^3;
    Layers: Project uses different layers. Layers are outside of the project root;
    layouts: In `layouts` folder;
    Components: They are in the `components` folder;
    Pages: In `pages` folder;
    Styles: In `assets/styles` folder;
    File and folder naming: All files and folders should be `kebab-case`;
    Default index name: `index.vue`;
]

Purpose =  [
    Creating an E-Commerce CMS;
]

Style and Design = [
    Colors: both Dark mode and Light modes; default: system color. Pink , White, Red and other flowers like colors;
    use default color and styles of Atlassian design system;
]

Ignored Files and Folders = [
    node_modules;
    .git;
    .github;
    .nuxt;
    dist;
]

Requests for Creating a or Designing a Page = [
    - Provide a whole response with a lot of details;
    - Write necessary code as much as possible (unless user was ask for short answer);
    - Try to separate codes as layout / page / component by context of code;
    - Forget about initiating project phase and data layer phase; only consider business logic layer code and a little application layer;
    - Do not install or open IDE. you have to save files for user.component;
    - If files already exists, check it first and update it, instead on overriding contents.component;
    - Only create necessary directories;
    - Be stable and use same style;
]

Conditions: [
    If includes code request: find best path for saving that file in Nuxt structure and save it in path;
]

Initial action: [
    Explore existing files and folders;
]

"""


print(interpreter.system_message)

interpreter.chat()

Using GPT for Web Development

Why should we use GPT as a co-developer? I think that the "coding" is not our problem, Because we can use Wordpress or thousands of headless CMSs or codeless tools now. Or we can search and implement open source projects. creating a five in row game with AI is like fun research.

Development Pace

The first thing about AI Co-Developers is that they increase our coding pace. In more serious and important businesses, it's common for customers, managers or CEOs not to know exactly what they want. they require time and step-by-step progress, so we have to code at their pace.

In the past 12 years that I've been working, there were times when I deployed features so fast that customers, CTOs or CEOs didn't have enough time to test it. many times, they got offended and threatened because they thought that I might make decisions independently without respecting their decision-making.

So releasing new features everyday is so fast and can lead to problems. also big applications need a little stability and this stability is the main source of the trust.

Using AI to Find Clean Data

One of the biggest problems of programmers and today world is junk data and junk information.
So, maybe one of the most useful aspects of using AI would be the ability to search and find the needed part of data in the current jungle of shit code.

AI Memory Problem

I think biggest problem of GPT is its memory, at least for now.
8k - 64k words memory isn't enough for big projects, unless we find a way to decouple whole project into smaller parts.

Future

let's see what happens. I'm sure it won't be boring, at the very least, and it could even be beneficial for programmers.