View Video · Report Bug · Request Feature

Table of Contents 📋

1. About The Project 🌱
   • Key Features 🔑
   • Technology Stack 🧑‍💻
2. Getting Started 🏁
   • Prerequisites 📦
   • Installation ⬇️
   • Running AW & CMS 🚀
     • Configuration ⚙️
     • Running 🏃‍♂️
     • Generated Website Files ♻️
3. Usage 🛠️
   • View Video 🎬
   • Screenshot 📸
4. License 🪪
5. Contact 📞

About The Project 🌱

Automated-Website-and-CMS is a powerful tool designed to simplify website creation without the need for coding. This project empowers users to effortlessly generate personalized websites by filling out a simple form

Key Features 🔑

• Form-Based Website Creation: Easily create websites by providing information through a straightforward form

• Dynamic Customization: Once the website is generated, users have three flexible options for customizing segments:

  1. Regenerate Segments: Update segments based on the information initially provided in the form

  2. Interactive Fixes: Users can choose to fix a segment by providing specific instructions. This information, combined with the segment code, is sent to ChatGPT 3.5 Turbo for intelligent adjustments

  3. Instruction-Only: Users can instruct ChatGPT 3.5 Turbo on changes without providing the existing segment code, allowing for complete freedom in designing the section

Technology Stack 🧑‍💻

• 
• 
• 
• 
• 
• 
• 
• 

Getting Started 🏁

Prerequisites 📦

Before getting started, ensure you have the necessary prerequisites:

• API Key from OpenAI: Register for an account on OpenAI and obtain your API key. You'll need this key to leverage the power of ChatGPT 3.5 Turbo for advanced segment adjustments and personalized transformations. Visit OpenAI to get your API key

• Node.js: Make sure you have Node.js installed. If not, you can download and install it from Node.js

Installation ⬇️

1. Clone the repository

   git clone https://github.com/Elio-Aliaj/Automated-Website-and-CMS.git

2. Install packages

   cd .\Automated-Website-and-CMS\

   npm install

Running AW & CMS 🚀

Configuration ⚙️

1. In the main project folder (Automated-Website-and-CMS), locate the .env.example file
2. Rename it to .env
3. Open the .env file:
   • Replace ID with your actual OpenAI API Organization Id.
   • Replace KEY with your actual OpenAI API Key.

Running 🏃‍♂️

1. Run Json Server

   cd .\Automated-Website-and-CMS\Data\

   npx json-server --watch db.json --port 8000

   This will be shown in the console:

   \{^_^}/ hi!
   
   Loading db.json
   Done
   
   Resources
   http://localhost:8000/formData
   http://localhost:8000/response
   
   Home
   http://localhost:8000
   
   Type s + enter at any time to create a snapshot of the database
   Watching...
   

2. Run NodeJS

   cd '.\Automated-Website-and-CMS\AI Caller\'

   node .\AI_Caller.js

   This will be shown in the console:

   Server listening at http://localhost:3000
   

Keep this console in view, because it will update you with any changes made to the website or inform for any errors

3. Open the Form

   • Navigate to the .\Automated-Website-and-CMS\Form UI directory.
   • Locate the User_interface.html file and open it in your preferred web browser.
   • The form UI will guide you through the process of filling out the necessary information to generate your initial website.
   This Form will show up on a website:

   

4. Customize the Website

   • When hovering over every section with the mouse, a gear ⚙️ icon will appear. Clicking the gear icon presents three ways of modifying the website:

     1. Generate Section Again:

        • This option will regenerate the current section with the data from the initial form.

     2. Fix the Current Section:

        • Choose this option to fix the current segment by providing instructions on how you want the segment to change. The provided instructions, combined with the segment code, are sent to ChatGPT 3.5 Turbo. After processing, ChatGPT 3.5 Turbo makes the necessary changes and returns the updated code.

     3. Generate by Input:

        • Users can provide instructions to ChatGPT 3.5 Turbo for changes without providing the existing segment code. This allows for complete freedom in designing the section.
     This will show up:

     

     ⚠️ Do not make more than one change at a time otherwise you will get an 🛑 Error 429 🛑
     

Generated Website Files ♻️

After completing the website generation process, you can find all the generated files and images in .\Automated-Website-and-CMS\Gen_Websit directory:

• Navigate to this directory to access and manage the files created during the website generation. You'll find the components, pages, and images that make up your personalized website.

• Feel free to explore and make further customizations if needed. If you have any questions or encounter issues, please refer to the documentation or reach out to the project's support channels.

  To remove Gear Icon ⚙️:

  • In the end of the Gen_Web.html file you should delete this lines:

    <!-- Your can delete from HERE to... -->
    <script src="../Edit_Website/Edit.js"></script>
    <script type="module">
      const socket = new WebSocket("ws://localhost:3000");
      socket.onmessage = (event) => {
        if (event.data === "reload") {
          location.reload();
        }
      };
    </script>
    <!-- ...to HERE after you are done with the website creation-->

Usage 🛠️

Video 🎬

Web.Generator.mp4

Screenshot 📸

Here are some examples:

License 🪪

©️ Copyright 2023 Elio Aliaj [email protected]

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Contact 📞