Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

adding text to speach using third-party api #15

Open
wants to merge 3 commits into
base: staging2
Choose a base branch
from
Open

adding text to speach using third-party api #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03dfdff
Add Voice Option On HTML View
salahbakhash Jun 30, 2023
cf3e3f0
merge branch 'main' of github.com:salahbakhash/Whatsapp-GPT-Firebase-…
salahbakhash Jun 30, 2023
a69b235
Update README.md
salahbakhash Jun 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@ STORAGE_BUCKET="XXXX.appspot.com"
MESSAGING_SENDER_ID="9999999"
APP_ID="1XXXX"
OPEN_AI_KEY="sk-XXXXXXXX"
TEXT_TO_SPEECH_KEY="XXXXXX"
PORT=3500
61 changes: 38 additions & 23 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
# Whats-GPT-Firebase

<img src="images/fig1.jpg" />
Whats-GPT-Firebase is a Node.js application that integrates the WhatsApp Web API, OpenAI's GPT-3.5 language model, and Firebase Realtime Database. It allows you to interact with a WhatsApp chatbot powered by OpenAI's GPT-3.5 model and store the chat history in Firebase.

Whatsapp-GPT-Firebase-txt2speach is a Node.js application that integrates WhatsApp-Web.js, GPT-3.5 language model with Cloudlabs Api, and Firebase Realtime DB. allowing you to make a WhatsApp chatbot powered by OpenAI's GPT-3.5 to respond, and convert the answer to speach using Cloudlabs API, and store the chat history in Firebase DB.

if you understand arabic you can watch the video on my channel => [Salah Bakhash](https://www.youtube.com/channel/UCFwqBlQH93pPRSeXTVTOMZw).

## Table of Contents

- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
Expand All @@ -12,47 +16,58 @@ Whats-GPT-Firebase is a Node.js application that integrates the WhatsApp Web API
## Installation

1. Clone the repository to your local machine:
```
git clone https://github.com/enghamzasalem/whats-gpt-firebase.git
```
2. Navigate to the project directory:
```
cd whats-gpt-firebase
```

```
git clone https://github.com/salahbakhash/Whatsapp-GPT-Firebase-Txt-To-Speech.git
```

2. Navigate to the project directory:

```
cd Whatsapp-GPT-Firebase-Txt-To-Speech
```

3. Install the dependencies:
```

```
npm install
```
* Set up Firebase:

- Set up Firebase:

4. Create a new Firebase project in the [Firebase Console](https://firebase.google.com/docs/web/setup).
Replace the Firebase configuration values in the .env file with your project's configuration values. Refer to the Firebase documentation for more information on obtaining your project's configuration.
Make sure your Firebase project has the Realtime Database enabled.
* Set up OpenAI:
Replace the Firebase configuration values in the .env file with your project's configuration values. Refer to the Firebase documentation for more information on obtaining your project's configuration.
Make sure your Firebase project has the Realtime Database enabled.

- Set up OpenAI:

5. Obtain an API key from [OpenAI](https://platform.openai.com/account/api-keys).
Replace the placeholder OPEN_AI_KEY in the code with your actual OpenAI API key.
Replace the placeholder OPEN_AI_KEY in the code with your actual OpenAI API key.

# Usage

To run the application, use the following command:

```
node index.js
```

* Once the application is running, you can access it through a web browser or use the provided endpoints http://localhost:3500.
- Once the application is running, you can access it through a web browser or use the provided endpoints http://localhost:3500.

* To authenticate with WhatsApp, open your browser and navigate to http://localhost:3500/authenticate/{phoneNumber}/{prompt}
- To authenticate with WhatsApp, open your browser and navigate to http://localhost:3500/authenticate/{phoneNumber}/{prompt}

- Replace {phoneNumber} with your WhatsApp phone number (including the country code) and {prompt} with the initial message you want to send to the chatbot.
- A QR code will be generated, which you need to scan using the WhatsApp app on your phone. Once scanned, you will be authenticated with WhatsApp and ready to start interacting with the chatbot.
- You can also use the /submit endpoint with a POST request to authenticate. Pass the phone number and prompt in the request body.
The chat history will be stored in Firebase Realtime Database under the /links/test/{chatId} path.

* Replace {phoneNumber} with your WhatsApp phone number (including the country code) and {prompt} with the initial message you want to send to the chatbot.
* A QR code will be generated, which you need to scan using the WhatsApp app on your phone. Once scanned, you will be authenticated with WhatsApp and ready to start interacting with the chatbot.
* You can also use the /submit endpoint with a POST request to authenticate. Pass the phone number and prompt in the request body.
The chat history will be stored in Firebase Realtime Database under the /links/test/{chatId} path.
# Contributing
Contributions to Whats-GPT-Firebase are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.

this is not the main project, so if you want to contributing you should contributing your changes to the [Main Project](https://github.com/enghamzasalem/whats-gpt-firebase) By [@enghamzasalem](https://github.com/enghamzasalem/)

# License

This project is licensed under the [MIT License](https://opensource.org/license/mit/).

License Attribution:
Developer Relations: [Hamza Salem](https://enghamzasalem.com/)


112 changes: 68 additions & 44 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<title>WhatsGPT</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
background-image: url('https://w0.peakpx.com/wallpaper/818/148/HD-wallpaper-whatsapp-background-cool-dark-green-new-theme-whatsapp.jpg');
min-height: 100%;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-topleft w3-padding-large w3-xlarge">
WhatsGPT
</div>
<div class="w3-display-middle">
<h2 class="w3-jumbo w3-animate-top">WhatsGPT Connecter</h2>
<hr class="w3-border-grey" style="margin:auto;width:40%">
<form action="/submit" method="post">
<p class="w3-center">
<label><b>Your Phone</b></label>
<input name="phoneNumber" class="w3-input w3-border w3-margin-bottom" />
<label><b>Your Prompt</b></label>
<textarea name="message" class="w3-input w3-border w3-margin-bottom" rows="4" cols="50"></textarea>
</p>
<p class="w3-center">
<button type="submit">Submit</button>
</p>
</form>
</div>
<div class="w3-display-bottomleft w3-padding-large">
Powered by <a href="/" target="_blank">WhatsGPT</a>
</div>
</div>
</body>
</html>
<html>
<head>
<title>WhatsGPT</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Raleway"
/>
<style>
body,
h1 {
font-family: "Raleway", sans-serif;
}
body,
html {
height: 100%;
}
.bgimg {
background-image: url("https://w0.peakpx.com/wallpaper/818/148/HD-wallpaper-whatsapp-background-cool-dark-green-new-theme-whatsapp.jpg");
min-height: 100%;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-topleft w3-padding-large w3-xlarge">WhatsGPT</div>
<div class="w3-display-middle">
<h2 class="w3-jumbo w3-animate-top">WhatsGPT Connecter</h2>
<hr class="w3-border-grey" style="margin: auto; width: 40%" />
<form action="/submit" method="post">
<p class="w3-center">
<label><b>Your Phone</b></label>
<input
name="phoneNumber"
class="w3-input w3-border w3-margin-bottom"
/>
<hr>
<label class="w3-show" style="font-size:18px"><b>Use Voice Messages</b></label>
<input type="radio" id="message1" name="voice" value="1" class="w3-radio" />
<label for="message1" style="font-size:16px">text messages only</label>
<input checked type="radio" id="message2" name="voice" value="2" class="w3-radio" />
<label for="message2"style="font-size:16px">text with voice messages</label>
<input type="radio" id="message3" name="voice" value="3" class="w3-radio" />
<label for="message3"style="font-size:16px">voice messages only</label>
<hr>
<label><b>Your Prompt</b></label>
<textarea
name="message"
class="w3-input w3-border w3-margin-bottom"
rows="4"
cols="50"
></textarea>
</p>
<p class="w3-center">
<button type="submit">Submit</button>
</p>
</form>
</div>
<div class="w3-display-bottomleft w3-padding-large">
Powered by <a href="/" target="_blank">WhatsGPT</a>
</div>
</div>
</body>
</html>
Loading