About • How It Works • Tech Stack • Pre-requisites • Available Scripts • How to contribute • Learn More • Author
This project was my first time interacting with AIs!
With the boom of OpenAI's ChatGPT and DALL • E 2 I got really curious about this technology so new and yet so great at the same time, so I ended up trying to make a really simple clone of Midjourney!
OpenAI's image generation API were used on this project.
This project's backend is available here.
Right off the bat, the Home page is shown when entering the web app. In there, the Community Showcase is available - showing all the images in the database. On hover, the prompts used to generate that image, name of the person that made the prompt and a button that allows the user to download the image are shown.
To be able to interact with the API, you need to click on the button at the top right side of the screen 'Create'. By blicking on the button, the user is redirected to the Create Post page.
In this page, the user can fill in the form fields with their name and the prompt that they want to be make a image of or simply click on the 'Surprise Me' button to get a random prompt. Following that, by clicking on Generate, the API will return an AI generated image.
The user can decide if they want to share that image with the community or not or simply make the prompt again to get a better image.
The following tools were used in the construction of this application:
See the file package.json
Workspace
- Editor: Visual Studio Code
- OS: Ubuntu
- Browser: Microsoft Edge (Edge on Ubuntu!? Yeah, I know...)
Before you begin, you will need to have the following tools installed on your machine: npm, Git, VSCode.
// Clone this repository
$ git clone https://github.com/Lucas-zz/Midjourney.git
// Access the project folder cmd/terminal
$ cd Midjourney
// Install the dependencies
$ npm install
After this, you can start using the scripts below.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:5173 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about building for production for more information.
Once you've built the app, you may test it locally by running npm run preview command.
The preview command will boot up a local static web server that serves the files from dist at http://localhost:4173. It's an easy way to check if the production build looks OK in your local environment.
You can learn more in the Vite documentation.
To learn React, check out the React documentation.
- Fork the project.
- Create a new branch with your changes:
git checkout -b feat/myFeatureName - For each feature implemented, make a commit specifying what was done
- Submit your changes:
git push -u origin feat/myFeatureName
 Lucas Azzolini Vieira |
|---|
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent