VCU MegaHack-CodeScape

Everyone says the best way to conquer a coding problem is to write it out. Our goal at CodeScape is to convert your pseudocode into actual code. By utilizing modern-day AI like ChatGPT, we are able to take in photos and release a mockup of your code in any desired language.
Explore the docs »

View Demo

This project is a submission for VCU's MegaHacks Hackathon, where we were tasked to develop a simple web application that performs a useful function. For example, it could be a task tracker, a note-taking app, a weather app, etc.

CodeScape was inspired by the typical problem that developers have when converting pseudocode into real code. In our opinion planning and organizing your ideas before implementing them can be made easier by using pseudocode to visualize your thought process of approaching the problem. By utilizing ChatGPT, a AI tool, to read and produce code based on your pseudocode, CodeScape seeks to close the gap between planning and execution.

Pseudocode may be entered into CodeScape and converted into actual code segments in any preferred programming language. This is accomplished by first translating the pseudocode into executable code using ChatGPT's skills to understand the logic and intent behind it. Users may choose the target programming language, submit their pseudocode, and get a code sample in return.

We chose to use HTML, CSS, and JavaScript to build the front-end and then Python to cover the back end. While exploring the scopes of HTML, CSS, and JS, we were able to create a functioning web application and learned more about new tags that would help us connect our front-end to the back-end (like input to allow the user to provide the webpage with an image from their PC). We incorporated Python with our project by running scripts that would access the OpenAI API to decipher human text (pseudocode) and return code in languages that the user asked for.

• Finding ways to save the inputted images into our device
• Finding a file type that would be valid to upload when converting to pseudocode.
• Linking the image from the database to ChatGPT
• Optimizing the AI model
• Code Conceptual Correctness

We are proud of our beautiful front-end along with our end result, which successfully allows the user to easily insert an image and get the code back.

• We were able to successfully implement an Image Upload feature using imgur, AI, and HTML5, which allowed us to store user uploaded images in our local machine.
• We were able to learn how to work with API's and image analysis in Python, as well as how to use GPT-3 for generating pseudocode.
• How to connect client and server side code using Python, HTML, CSS, JavaScript, etc.

• User account
• Add more language compatibility
• Improved handwritten character recognition
• Expanded human language support

This is an example of how to list things you need to use the software and how to install them.

• npm

  npm install npm@latest -g

1. Get a free API Key at https://example.com
2. Clone the repo

   git clone https://github.com/github_username/repo_name.git

3. Install NPM packages

   npm install

4. Enter your API in config.js

   const API_KEY = 'ENTER YOUR API';

5. Install Node.js

Download and install from [here](https://nodejs.org/en/download/)

6. Install Python

Download and install from [here](https://www.python.org/downloads/). 
Make sure it's added to PATH during installation.

7. OpenAI Account

Signup for OpenAI account (free tier will work).
Install GPT-3 model by running this command in terminal:
bash
curl -sS https://raw.githubusercontent.com/openai/engines/
master/install_gpt-j-6B.sh | bash (Note that this may take some time as it downloads the model.)

8. OpenAI Libraries

Inside the project folder, run these commands in terminal:
pip install openai

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

For more examples, please refer to the Documentation

See the [open issues]https://github.com/GokulCh/MegaHack-CodeScape/issues) for a full list of proposed features (and known issues).

1. Prakash Chatlani - @prakashhc - [email protected]
2. Gokul Chaluvadi - @GokulCh - [email protected]
3. Harita Agarwal - @hpa179 - [email protected]
4. Kshitij Kokkera - @kshitijkokkeravcu - [email protected]