Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ladunjexa-pbl/vanillajs-zen-ai

ZenAI JavaScript AI Image Generator ChatGPT app using OpenAI ML DALL-E models ⚛
https://github.com/ladunjexa-pbl/vanillajs-zen-ai

dall-e expressjs machine-learning nodejs openai vanillajs

Last synced: 25 days ago
JSON representation

ZenAI JavaScript AI Image Generator ChatGPT app using OpenAI ML DALL-E models ⚛

Awesome Lists containing this project

README 

        





  ![Project Banner](readme_assets/readme_banner.png#gh-dark-mode-only)

  ![Project Banner](readme_assets/readme_banner-light.png#gh-light-mode-only)



  
ZenAI DALL-E GPT


  

  


    ZenAI is your digital image generator AI assistant, JavaScript ChatGPT AI app using OpenAI DALL-E ML models.

  





  

    contributors

  

  

    last update

  

  

    forks

  

  

    stars

  

  

    open issues

  

  

    license

  



   

 


    View Demo

   · 

    Documentation

   · 

    Report Bug

   · 

    Request Feature

  









# :notebook_with_decorative_cover: Table of Contents



- [About the Project](#star2-about-the-project)

  * [Folder Structure](#bangbang-folder-structure)

  * [Environment Variables](#key-environment-variables)

  * [Tech Stack](#space_invader-tech-stack)

- [Getting Started](#toolbox-getting-started)

  * [Installation](#gear-installation)

  * [Run Locally](#running-run-locally)

- [Contributing](#wave-contributing)

- [License](#warning-license)

- [Contact](#handshake-contact)

- [Acknowledgements](#gem-acknowledgements)



  



## :star2: About the Project



 

  







ZenAI is a VanillaJS ChatGPT AI app that resembles the DALL-E app with the ability to ask the AI for generate digital images from natural language descriptions.



### :bangbang: Folder Structure



The folder structure of ZenAI is separated into server-side and client-side.

```

ZenAI-GPT-Dall-E/

|- client/

  |-- assets/

  |-- public/

  |-- index.html

  |-- package.json

  |-- script.js

  |-- style.css

|- server/

  |-- package.json

  |-- server.js

  |-- .env

```



Now, lets dive into the server and client folders.



#### client



`index.html` - `style.css` - `script.js`



Responsive layouts with CSS and elegant UI (User Interface) that resembles the DALL-E app & communication with advanced GPT-3 model API using DALL-E



#### server



`server.js` - `.env`



Node.js used for the server-side, VanillaJS code using OpenAI DALL-E models, handle events with JS.





### :key: Environment Variables



In order to use ZenAI you have to create your OpenAI api key [here](https://openai.com/api), to run this web app, you will need to add the following environment variable to your .env file



`OPENAI_API_KEY`



### :space_invader: Tech Stack

![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)

![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB)



(back to top)



## 	:toolbox: Getting Started



### :gear: Installation



#### Step 1:

Download or clone this repo by using the link below:



```bash

 https://github.com/ladunjexa/ZenAI-GPT-Dall-E

```



#### Step 2:



LunaAI using NPM (Node Package Manager), therefore, make sure that Node.js is installed by execute the following command in console:



```bash

  node -v

```



#### Step 3:



Go to client & server folders and execute the following command in console to get the required dependencies:



```bash

  npm install

```



#### Step 4:



Within the server-side folder create a file named `.env` and add the following [environment variable](#key-environment-variables):



```bash

  OPENAI_API_KEY=

```



### :running: Run Locally



#### Step 1:



Go to server folder and execute the following command in console to get the required dependencies:



```bash

  npm run server

```



#### Step 2:



Go to client folder and execute the following command in console to get the required dependencies:



```bash

  npm run dev

```



(back to top)



## :wave: Contributing





  




Contributions are always welcome!



See [`contributing.md`](https://contributing.md/) for ways to get started.



Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.



If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

Don't forget to give the project a star! Thanks again!



1. Fork the Project

2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)

3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)

4. Push to the Branch (`git push origin feature/AmazingFeature`)

5. Open a Pull Request



(back to top)



## :warning: License



Distributed under the MIT License. See [LICENSE.txt](https://github.com/ladunjexa/ZenAI-GPT-Dall-E/blob/main/LICENSE) for more information.



(back to top)



## :handshake: Contact



Liron Abutbul - [@lironabutbul6](https://twitter.com/lironabutbul6) - [@ladunjexa](https://t.me/ladunjexa)



Project Link: [https://github.com/ladunjexa/ZenAI-GPT-Dall-E](https://github.com/ladunjexa/ZenAI-GPT-Dall-E)



(back to top)



## :gem: Acknowledgements



This section used to mention useful resources and libraries that used in ZenAI ChatGPT DALL-E



 - [OpenAI API](https://openai.com/api)

 - [Google Fonts](https://fonts.google.com/)

 - #JSMastery



(back to top)