Skip to content

Commit

Permalink
docs: better docs and examples
Browse files Browse the repository at this point in the history
  • Loading branch information
pixelass committed Apr 1, 2023
1 parent 42f6fdc commit 6a9db2c
Show file tree
Hide file tree
Showing 18 changed files with 2,132 additions and 122 deletions.
224 changes: 125 additions & 99 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,33 +9,52 @@

- [Introduction](#introduction)
- [Getting Started Guide](#getting-started-guide)
- [1. Prerequisites](#1-prerequisites)
- [2. Clone the repository](#2-clone-the-repository)
- [3. Install dependencies](#3-install-dependencies)
- [4. Add your API key](#4-add-your-api-key)
- [5. Run the First Generation](#5-run-the-first-generation)
- [6. Explore the Results](#6-explore-the-results)
- [7. Customize the Generative Process (Optional)](#7-customize-the-generative-process-optional)
- [8. Learn and Iterate](#8-learn-and-iterate)
* [1. Prerequisites](#1-prerequisites)
* [2. Clone the repository](#2-clone-the-repository)
* [3. Install dependencies](#3-install-dependencies)
* [4. Add your API key](#4-add-your-api-key)
* [5. Run the First Generation](#5-run-the-first-generation)
* [6. Explore the Results](#6-explore-the-results)
* [7. Customize the Generative Process (Optional)](#7-customize-the-generative-process-optional)
* [8. Learn and Iterate](#8-learn-and-iterate)
- [Options](#options)
- [Learn JavaScript](#learn-javascript)
* [Learn JavaScript](#learn-javascript)
- [Driving Your Project Forward with Progressive Generations](#driving-your-project-forward-with-progressive-generations)
- [Goal](#goal)
- [Changelog](#changelog)
- [Evolution](#evolution)
- [Conclusion](#conclusion)
- [Acknowledgements](#acknowledgements)
- [Caution](#caution)
* [Step 1: Initial generation](#step-1-initial-generation)
* [Step 2: Adding a new feature](#step-2-adding-a-new-feature)
* [Step 3: Refactoring code](#step-3-refactoring-code)
* [Step 4: Fixing bugs](#step-4-fixing-bugs)
- [Understanding the Concept: A Comprehensive Guide](#understanding-the-concept-a-comprehensive-guide)
* [Goal](#goal)
* [Changelog](#changelog)
* [Evolution](#evolution)
* [Conclusion](#conclusion)
* [Acknowledgements](#acknowledgements)
* [Caution](#caution)
- [Examples](#examples)
- [Older Examples](#older-examples)
* [Calculator](#calculator)
* [Chatbot](#chatbot)
* [Mandelbrot](#mandelbrot)
* [Password Protecting Itself](#password-protecting-itself)
* [React App Form](#react-app-form)
* [RPG](#rpg)
* [Search Engine](#search-engine)
* [Links](#links)

<!-- tocstop -->

## Introduction

Check out our generative process powered by OpenAI's GPT-3.5 language model for easy creation of
innovative JavaScript projects. Build anything from interactive tools to text-based games without
needing a ton of coding experience. Get started today and unleash your creativity!
Welcome to the future of software development! Our generative process, powered by OpenAI's GPT-3.5
language model, marks the dawn of a new era. We are just scratching the surface of what's possible
with machine learning models and their integration into software development. The possibilities are
endless and the potential for innovation is unparalleled.

From console-based drawing apps to chatbots and search engines, our generative process is designed
to assist you in creating innovative software projects with ease. We invite skeptics and
non-believers alike to explore the potential of AI and machine learning in the realm of software
development. Join us as we enter a new era of software development, where the possibilities are
limitless and the future is bright.

## Getting Started Guide

Expand Down Expand Up @@ -176,45 +195,54 @@ those who are new to JavaScript development. So go ahead and give it a try!

## Driving Your Project Forward with Progressive Generations

Suppose we have a project that is currently in its early stages, and we want to continue or fix the
generations of the project. Here is how we can drive the project in a certain direction:
### Step 1: Initial generation

Start with the initial generation-000.js file, and set the goal and persona flags to give the
project direction. For instance, if we want to create a console-based drawing app, we can use the
following command:
Begin by starting with the initial `generation-000.js` file and set the `goal` and `persona` flags
to guide the direction of your project. This sets the foundation for the rest of the generative
process.

```shell
node generation-000.js -g 3 -G 'console-based drawing app' -p "junior developer"
```

Once we have reached the third generation, we can move towards adding user interaction by creating
the next generation-003.js file. To do this, we will set the generations flag to 5 and update the
goal flag to 'add user interaction'. We will also change the persona flag to "expert ux engineer,
node.js expert":
### Step 2: Adding a new feature

As the project evolves, you can create a new generation of the codebase and focus on adding new
features. To do this, create the last generation-x.js file where x is the last available number in
the sequence. Set the `generations` flag to specify how many generations the new file will be based
on. Update the goal flag to define the new feature, and change the `persona` flag to match the
expertise needed for this feature.

```shell
node generation-003.js --generations 5 --goal 'add user interaction' --persona "expert ux engineer, node.js expert"
node generation-003.js -g 5 -G 'add user interaction' -p "expert ux engineer, node.js expert"
```

The next step is to add color selection to our console-based drawing app. We will create
generation-005.js and set the generations flag to 6. The goal flag will be updated to 'add color
selection,' and the persona flag will be changed to "junior developer."
### Step 3: Refactoring code

Refactoring is an important aspect of the generative process that ensures the quality of the
codebase. You can create a new generation of the codebase with the goal of refactoring the existing
code. Set the `generations` flag to specify how many generations the new file will be based on.
Update the goal flag to describe the refactoring task, and change the `persona` flag to match the
expertise needed for the task.

```shell
node generation-005.js --generations 6 --goal 'add color selection' --persona "junior developer"
node generation-005.js -g 6 -G 'refactor code' -p "senior developer, code optimization expert"
```

Finally, we need to fix a bug where the color red would print undefined. We can create
generation-006.js and set the generations flag to 7. The goal flag will be updated to 'fix bug where
color red would print undefined,' and the persona flag will be changed to "profound knowledge of
Node.js, debugging expert."
### Step 4: Fixing bugs

Bug fixing is another crucial step in software development. You can create a new generation of the
codebase with the goal of fixing a bug. Set the `generations` flag to specify how many generations
the new file will be based on. Update the `goal` flag to describe the bug, and change the `persona`
flag to match the expertise needed for the task.

```shell
node generation-006.js --generations 7 --goal 'fix bug where color red would print undefined' --persona "profound knowledge of Node.js, debugging expert"
node generation-006.js -g 7 -G 'fix bug where color red would print undefined' -p "profound knowledge of Node.js, debugging expert"
```

By following these steps, we can drive our project towards a specific direction and achieve our
desired outcome.
By following these steps, you can drive your project forward with progressive generations, adding
new features, optimizing code, fixing bugs, and more. This approach allows for a structured and
efficient development process, while still maintaining flexibility and adaptability.

## Understanding the Concept: A Comprehensive Guide

Expand Down Expand Up @@ -295,72 +323,30 @@ system development and evaluation.

## Examples

**(Generation 5)**

```js
/**
* CHANGELOG:
* Generation 1: implement Mandelbrot algorithm
* Generation 2: add color to the Mandelbrot set
* Generation 3: add zoom functionality to the Mandelbrot set
* Generation 4: add ability to move the Mandelbrot set
* Generation 5: add ability to change the number of iterations
*/
```

Try the interactive [mandebrot-zoom](examples/mandelbrot-zoom)
### Calculator

```shell
❯ node generation-005.js -g 5
Enter zoom level (1-10): 7
Enter x offset (-1 to 1): -0.6
Enter y offset (-1 to 1): 0.25
Enter number of iterations (1-1000): 1000
```
A simple command-line [calculator](examples/calculator) that performs basic arithmetic operations.
Enter the calculation in the format number operator number (e.g. 2 + 2). The result will be
displayed in the console.

<img src="assets/example-09.png" alt="example-01.png" width="600"/>
### Chatbot

Try the interactive [calculator](examples/calculator)
A [chatbot](examples/chatbot) that responds to user input with pre-defined messages. This example is
a good starting point for building your own chatbot. The [chatbot-gpt](examples/chatbot-gpt)
extension allows for integration with OpenAI's GPT models to generate more advanced and realistic
responses.

```shell
❯ node generation-003.js -g 3
Welcome to the CALCULATOR!
Please enter your calculations in the following format: number operator number
Supported operators: +, -, *, /
Example: 2 + 3
To save calculations, type 'save'
To load calculations, type 'load'
To exit, type 'exit'
400 + 20
Result: 420
save
Calculations saved to file!
load
Calculations loaded from file:
400 + 20 = 420
exit
Exiting calculator...
Calculations performed:
400 + 20 = 420
### Mandelbrot

```
A console-based application that generates a Mandelbrot fractal and outputs it as ASCII art in a 90
columns \* 30 rows grid. The mandelbrot-config example allows for the customization of the fractal
parameters.

## Older Examples
**Examples:**

**(Generation 2)**

```js
/**
* CHANGELOG:
* Generation 0: implement base script
* Generation 1: implement mandelbrot function
* Generation 2: improve mandelbrot function, add colors
*/
```

<img src="assets/example-01.png" alt="example-01.png" width="200"/><img src="assets/example-02.png" alt="example-02.png" width="200"/>

**(Generation 3)**
- [mandelbrot-config](examples/mandelbrot-config)
- [mandelbrot-moving](examples/mandelbrot-moving)
- [mandelbrot-zoom](examples/mandelbrot-zoom)

```js
/**
Expand All @@ -373,3 +359,43 @@ Calculations performed:
```

<img src="assets/example-03.png" alt="example-03.png" width="200"/><img src="assets/example-04.png" alt="example-04.png" width="200"/><img src="assets/example-05.png" alt="example-05.png" width="200"/><img src="assets/example-06.png" alt="example-06.png" width="200"/><img src="assets/example-07.png" alt="example-07.png" width="200"/>

### Password Protecting Itself

An example that demonstrates how to create a
[password-protected](examples/password-protecting-itself) script. When the script is run, it prompts
the user for a password. If the correct password is entered, the script will execute. Otherwise, it
will terminate.

### React App Form

An example that demonstrates how to build a [React app](examples/react-app-form) by allowing the
script to execute CLI commands. This example creates a form component in a React app using the
create-react-app CLI.

### RPG

An example of a text-based [role-playing gme](examples/rpg) that takes place in a dungeon. Players
navigate through the dungeon and encounter monsters, traps, and treasure. The game includes combat
mechanics and a simple inventory system.

### Search Engine

A console-based [search engine](examples/search-engine) that utilizes Bing to fetch real search
results. Users can enter a search query and the top results will be displayed in the console. Users
can also choose to open the results in their default browser.

### Links

Each of these examples showcases the endless possibilities of what can be created with this
generative process, powered by OpenAI's GPT-3.5 language model.

- [chatbot](examples/chatbot)
- [chatbot-gpt](examples/chatbot-gpt)
- [mandelbrot-config](examples/mandelbrot-config)
- [mandelbrot-moving](examples/mandelbrot-moving)
- [mandelbrot-zoom](examples/mandelbrot-zoom)
- [password-protecting-itself](examples/password-protecting-itself)
- [react-app-form](examples/react-app-form)
- [rpg](examples/rpg)
- [search-engine](examples/search-engine)
9 changes: 8 additions & 1 deletion base.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import process from "node:process";
import fs from "node:fs/promises";
import path from "node:path";
import { config } from "dotenv";
import meow from "meow";
import { Configuration, OpenAIApi } from "openai";
import ora from "ora";
import pkg from "./package.json" assert { type: "json" };

config();

const { flags } = meow("", {
Expand Down Expand Up @@ -50,6 +53,10 @@ There is a GOAL, it must be completed
GOAL: ${flags.goal}
AVAILABLE NPM PACKAGES: ${Object.entries(pkg.dependencies)
.map(([name, version]) => `${name}@${version}`)
.join(", ")}
RULES:
- Pay special attention TO ALL UPPERCASE words
- Pay attention to the GOAL and EXTEND it
Expand Down Expand Up @@ -129,5 +136,5 @@ RULES:
}

export function buildFilename(currentGeneration) {
return `generation-${currentGeneration.toString().padStart(3, "0")}.js`;
return path.join(".", `generation-${currentGeneration.toString().padStart(3, "0")}.js`);
}
Loading

0 comments on commit 6a9db2c

Please sign in to comment.