works for create c# and angular projects?

[johnfelipe]

works for create c# and angular projects?

[unconv]

I'm not familiar with either of those, but here's what it generates with GPT-4 from "create a fully functioning todo app in angular" for 1.60 USD:

Code looks like this: src/app/todo-list/todo-list.component.html

<div class="todo-list">
  <input [(ngModel)]="newTodo" (keyup.enter)="addTodo()" placeholder="What needs to be done?">
  <ul>
    <li *ngFor="let todo of todos; let i = index">
      {{ todo }}
      <button (click)="deleteTodo(i)">Delete</button>
    </li>
  </ul>
</div>

src/app/todo-list/todo-list.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit {
  todos: string[];
  newTodo: string;

  constructor() { 
    this.todos = [];
    this.newTodo = '';
  }

  ngOnInit() {}

  addTodo() {
    if(this.newTodo) {
      this.todos.push(this.newTodo);
      this.newTodo = '';
    }
  }

  deleteTodo(index: number) {
    this.todos.splice(index, 1);
  }
}

I can't get it to run, though.

[johnfelipe]

Gp4 or with gpt 3.5 turbo?

[unconv]

That was GPT-4. This is GPT-3.5:

src/app/services/todo.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TodoService {
  private tasks: string[] = [];

  constructor() { }

  getTasks(): string[] {
    return this.tasks;
  }

  addTask(task: string): void {
    this.tasks.push(task);
  }

  deleteTask(task: string): void {
    const index = this.tasks.indexOf(task);
    if (index !== -1) {
      this.tasks.splice(index, 1);
    }
  }
}

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  newTask: string = '';
  tasks: string[] = [];

  addTask() {
    if (this.newTask.trim() !== '') {
      this.tasks.push(this.newTask);
      this.newTask = '';
    }
  }

  deleteTask(task: string) {
    this.tasks = this.tasks.filter(t => t !== task);
  }
}

Again, I don't know how to run this and it seems that it in fact wouldn't even run if i knew (some files are missing)

EDIT: GPT-3.5 was 0.07 USD

[ramene]

I haven't played with Angular in the better part of 10 years, but this seemed like a great use case...and the results are nothing short of complete shock. I only have to make a slight modification to the prompt to get this working with little to no intervention in its execution, but in the end, it does work. I'll create a PR once I get it working without fail., I indicate my trivial example below.

Here is my original prompt:

Create a fully functioning todo app in the latest version of angular and wrap the application in a Docker container with all the necessary dependencies, build the application, containerize it and in the end I want the docker run command in order to verify the working application. You cannot attempt to install or setup the requisite environment locally because I have not installed any of the cli tools locally other than Docker., instead I want you to use the latest public Docker container., obtained only from Docker Hub for all your needs if the build tool is not installed locally, always default to using a container and mapping the volume of that container to the where you are building the application. Make sure you using the latest version of ngx and ng and make sure you are using the latest versions of Angular and all it's requisite dependencies

Here is the Improved Prompt, rephrased by gpt-autopilot

You need to create a fully functioning todo app using the latest version of Angular. The application should be wrapped in a Docker container along with all the necessary dependencies. You should build the application and containerize it. Finally, provide the docker run command to verify the working application. You are not allowed to install or set up the requisite environment locally, and should use the latest public Docker container obtained from Docker Hub for all your needs. If the build tool is not installed locally, always default to using a container and map the volume of that container to the build location. Make sure to use the latest version of ngx and ng, as well as the latest versions of Angular and all its requisite dependencies.

ChatGPT Responded

I will start by creating a new Angular project by running the ng new command. Since I am not allowed to install or set up the requisite environment locally, I will use the latest public Docker container obtained from Docker Hub for this purpose. I will map the volume of the Docker container to the project directory so that the generated project files are saved in the host machine.

After creating the project, I will navigate into the project directory and verify that the Angular CLI is installed by running the ng version command. This will give me the information about the versions of ngx, ng, Angular, and all its requisite dependencies.

Next, I will create the necessary components, services, and modules for the todo application. I will use the Angular CLI to generate these files. For example, I can generate a todo.component using the command ng generate component todo. Similarly, I will create other components, services, and modules as required for the application.

Once all the necessary files are generated and the directory structure is set up, I will proceed to implement the functionality of the todo app. This will include features such as adding tasks, marking tasks as complete, and deleting tasks. I will write the necessary code in the generated files to implement these features.

To store the tasks, I will create a model representing a task and use a service to manage the tasks. The service will have methods to add, delete, and update tasks. I will also create a component to display the list of tasks and provide user interactions.

After implementing the functionality, I will build the Angular application using the ng build command. Since I am not allowed to install the build tool locally, I will again use the Docker container to run the build command and map the volume to the project directory.

Once the build is complete, I will create a Dockerfile in the project directory to containerize the Angular application. The Dockerfile will specify the base image, copy the built Angular files into the container, and expose the necessary ports.

Next, I will build the Docker image using the docker build command. I will tag the image with a suitable name and version.

Finally, to verify the working application, I will use the docker run command to run the Docker container. I will specify the port mapping and any other necessary configuration options. This will start the containerized Angular application, and I will be able to access it in a web browser using the specified port.

Once I have verified that the application is working as expected, I will consider the project finished and notify the user by calling the project_finished function.

GPT: Do you want to use this project outline?
You (y/n): y

TASKLIST: Creating a tasklist...
GPT-API:  Waiting... OK! (+1486 tokens, total 2964 / 0.01 USD)
TASKLIST: 1. In project directory: Create a new Angular project. Verify Angular CLI version. Create necessary components, services, and modules.
          2. In todo.component.ts: Implement functionality for adding tasks. Implement functionality for marking tasks as complete. Implement functionality for deleting tasks.
          3. In task.service.ts: Implement task service to manage tasks.
          4. In task.model.ts: Create a model representing a task.
          5. In tasks.component.ts: Implement component to display list of tasks.
          6. In ng build: Build the Angular application.
          7. In Dockerfile: Create Dockerfile to containerize the application. Specify base image and copy built Angular files. Expose necessary ports in the Dockerfile.
          8. In docker build: Build the Docker image.
          9. In docker run: Run the Docker container to verify the working application.
          10. In project directory: Notify user that the project is finished.

GPT: Do you want to continue with this task list?
You (y/n): y

GPT-API:  Waiting... OK! (+2069 tokens, total 5033 / 0.02 USD)
FUNCTION: Creating directory src
FUNCTION: Creating directory app
GPT-API:  Waiting... OK! (+2158 tokens, total 7191 / 0.02 USD)

Here's the package.json that was created:

{
  "name": "todo-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.1.0",
    "@angular/common": "^16.1.0",
    "@angular/compiler": "^16.1.0",
    "@angular/core": "^16.1.0",
    "@angular/forms": "^16.1.0",
    "@angular/platform-browser": "^16.1.0",
    "@angular/platform-browser-dynamic": "^16.1.0",
    "@angular/router": "^16.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.4",
    "@angular/cli": "~16.1.4",
    "@angular/compiler-cli": "^16.1.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3"
  }
}

Here's the multi-stage Dockerfile that was created:

FROM node:latest AS build
WORKDIR /app
COPY ["package.json", "package-lock.json*", "./"]
RUN npm install --silent
COPY . .
RUN npm run build

FROM nginx:latest
COPY --from=build /app/dist/todo-app /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

[unconv]

@ramene Did you actually get a working todo app or just the default page of Angular?

[ramene]

This is what I'm futzing with now., it did create the components, for tasks and todo but because I exited out of the process to validate the docker commands I was getting... when I continue, the directory hierarchy gets mangled, because I will now have deeply nested directories containing fragments of the source / files edited... seen below; Creating directory src/app/todo-app/src/app

Here's one the components it created from the original prompt as I review what happened:

GPT-API:  Waiting... OK! (+2459 tokens, total 12073 / 0.04 USD)
FUNCTION: Creating directory src/app/todo-app/src/app
GPT-API:  Waiting... OK! (+2543 tokens, total 14616 / 0.05 USD)

#########################################################
GPT: I want to run the following command:
------------------------------
docker run --rm -v $(pwd):/app -w /app node:lts-alpine sh -c "ng generate component todo"
------------------------------
Create necessary components, services, and modules
------------------------------
Base: ~/.remote/github.com/gpt-autopilot/code/src/app/todo-app
#########################################################

➜  app git:(master) ✗ tre
      1 .
      2 ├── tasks
      3 │   └── tasks.component.ts
      4 ├── todo
      5 │   └── todo.component.ts
      6 ├── app.component.css
      7 ├── app.component.html
      8 ├── app.component.spec.ts
      9 ├── app.component.ts
     10 ├── app.module.ts
     11 ├── task.model.ts
     12 └── task.service.ts
     13
     14 3 directories, 9 files
➜  app git:(master) ✗

tasks_component:

import { Component, OnInit } from '@angular/core';
import { TaskService } from '../task.service';

@Component({
  selector: 'app-tasks',
  templateUrl: './tasks.component.html',
  styleUrls: ['./tasks.component.css']
})
export class TasksComponent implements OnInit {
  tasks: Task[] = [];

  constructor(private taskService: TaskService) {}

  ngOnInit(): void {
    this.getTasks();
  }

  getTasks(): void {
    this.taskService.getTasks()
      .subscribe(tasks => this.tasks = tasks);
  }

  addTask(task: string): void {
    this.taskService.addTask(task);
    this.getTasks();
  }

  completeTask(task: Task): void {
    task.completed = true;
    this.taskService.completeTask(task.id);
  }
}

todo_component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnInit {
  tasks: string[] = [];
  newTask: string = '';

  constructor() {}

  ngOnInit(): void {}

  addTask(): void {
    if (this.newTask.trim() !== '') {
      this.tasks.push(this.newTask);
      this.newTask = '';
    }
  }

  completeTask(index: number): void {
    this.tasks.splice(index, 1);
  }

  deleteTask(index: number): void {
    this.tasks.splice(index, 1);
  }
}

[ramene]

The magic of GPT is how explicit you truly have to be., if you don't speficy exactly what you're wanting to acomplish, you won't get it., but if you do know where the fault lines are and you specify this, then this works amazingly well. Excellent work to you @unconv 🍻

In the end, this actually works... I just have to do it again. I'm curious why the cost bumped up as I was cleaning up the Dockerfile I fuct up at 4AM in the morning... so, it's my own fault that it cost as much. I'm also curious how well this would work with something even more in the weeds, i.e., webpack, react, nextjs, etc....

GPT-API:  Waiting... OK! (+4159 tokens, total 83473 / 0.25 USD)
FUNCTION: Writing to file code/Dockerfile...
GPT-API:  Waiting... OK! (+4332 tokens, total 87805 / 0.27 USD)
DONE:     Wrote to file code/Dockerfile
GPT-API:  Waiting... OK! (+4318 tokens, total 92123 / 0.28 USD)
FUNCTION: Writing to file code/nginx.conf...
GPT-API:  Waiting... OK! (+4477 tokens, total 96600 / 0.29 USD)
DONE:     Wrote to file code/nginx.conf
GPT-API:  Waiting... OK! (+4482 tokens, total 101082 / 0.31 USD)

Once I get this working as expected, I'll spell it all out in the PR adding the newer, more complicated example.

[ramene]

As it turns out, I'm unable to reproduce, even a similar outcome due to known issues with GPT. I've come close, a number of times on atleast 10 different attempts at this point, all wildly different.

@johnfelipe HTH, I believe you question was safely answered. It'll create an Angular application, in varying ways, everytime... and therein lies the problem. I even had ChatGPT attempt to improve the prompt to make it crystal clear.

Across the 10 attempts, I think it costs under $3 USD. Well worth it.

[unconv]

@ramene You could try setting a lower temperature with the --temp flag. A lower temperature will produce more consistent results (less "creative"), although they might be consistently worse lol. Default temp is 1.0. You can try --temp 0.5 for example.

Also, creating a system message file prompts/angular/system_message and including a basic folder and file structure for a basic Angular project might help (and adding other "notes" about Angular projects there). The system message can be forced with --system angular

EDIT: Also using --model 4 to use GPT-4 might improve results, but expect 10x the price.

[johnfelipe]

@ramene can u share all your prompts pls, included refined answer in this command line app

[ramene]

@johnfelipe my original prompt, the initial one is in the thread above. The most impressive part for me, was how it nailed the docker` commands, which was a bit of a surprise -- I guess I was lost in the hallucination.

#########################################################
GPT: I want to run the following command:
------------------------------
docker run --rm -v $(pwd):/app -w /app node:lts-alpine sh -c "ng generate component todo"
------------------------------
Create necessary components, services, and modules
------------------------------
Base: ~/.remote/github.com/gpt-autopilot/code/src/app/todo-app
#########################################################

While mutually exclusive of the work that @unconv did here, I'm thinking the newer models may do a little better in these domains and/or scaffoldings. It's worth playing with --system as suggested above either way. The more specific we are, the better.

I think WolframAlpha followed a similar approach to their integrations with OpenAI