Merge pull request #35 from facebookincubator/arvind/website-content

[Website] Update docs content and home page design

README.md

@@ -6,7 +6,7 @@ owned infra.
 
 # Details
 
-CP4M acts as a bridge between existing Messenger and Whatsapp APIs and existing LLM APIs (OpenAI, LLaMa, etc.)  
+CP4M acts as a bridge between existing Messenger and Whatsapp APIs and existing LLM APIs (OpenAI, LLaMa, etc.)
 ![cp4m_diagram](https://github.com/facebookincubator/CP4M/assets/6844618/601433ff-c77d-4d52-a6f8-4f3b0ff45aae)
 
 ## Quickstart
@@ -43,14 +43,14 @@ storage_duration_hours = 1
 storage_capacity_mbs = 1
 
 [[handlers]]
-type = "whatsapp"
 name = "whatsapp_test"
+type = "whatsapp"
 verify_token = "<your verification token here>"
 app_secret = "<your verification app secret here>"
 access_token = "<you access token here>"
 
 [[services]]
-webhook_path = "/whatsapp"
+webhook_path = "/<webhook-pathname>"
 plugin = "openai_test"
 store = "memory_test"
 handler = "whatsapp_test"
@@ -82,8 +82,8 @@ app_secret = "<your verification app secret here>"
 page_access_token = "<your page access token here>"
 
 [[services]]
-webhook_path = "/messenger"
-plugin = "openai_test"
+webhook_path = "/<webhook-pathname>"
+plugin = "hf_test"
 store = "memory_test"
 handler = "messenger_test"
 ```

docs/docs/connecting-your-llm/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "LLM Connections",
+  "position": 4,
+  "link": {
+    "type": "generated-index",
+    "description": "Learn how to connect CP4M with your LLM service provider."
+  }
+}

docs/docs/connecting-your-llm/connecting-llama-via-huggingface.md

@@ -0,0 +1,63 @@
+---
+sidebar_position: 1
+---
+
+# Connecting to Llama via Hugging Face
+
+To connect CP4M to Llama via Hugging Face, you will need:
+1. A Hugging Face account
+2. Access to the Llama model from Meta
+
+## Sign up for a Hugging Face account
+Hugging Face is a platform that helps you build, deploy, and train machine learning models. You can sign up for an account [here](https://huggingface.co/join).
+
+![Hugging Face Home Page](./img/hugging-face-home-page.png)
+
+## Accessing the Llama model on Hugging Face
+Hugging Face has a large repository of machine learning models for a variety of use cases accessible [here](https://huggingface.co/models).
+
+You can search for the LLama model from Meta of your choice. For the purposes of this tutorial, we will be using the [LLama-2-7b-chat-hf model](https://huggingface.co/meta-llama/Llama-2-7b-chat-hf).
+
+In order to use the Llama model, you will need to accept the Llama 2 Community License Agreement on the [model page](https://huggingface.co/meta-llama/Llama-2-7b-chat-hf).
+
+![Gated model agremeent](./img/hugging-face-gated-model-agreement.png)
+
+Once your account is approved, the model page will inform you that you have been granted access.
+
+![Gated model access](./img/hugging-face-gated-model-access.png)
+
+## Deploying model using Inference API
+The fastest way to deploy Llama is through Hugging Face's serverless Inference API.
+
+1. Go to the [Llama model page](https://huggingface.co/meta-llama/Llama-2-7b-chat-hf).
+2. On the top right, click on the **Deploy** dropdown button.
+
+![Model Deploy](./img/hugging-face-model-deploy.png)
+
+
+3. In the dropdown, click the **Inference API (serverless)** option. *Note: Using Inference API requires a [Hugging Face Pro subscription](https://huggingface.co/pricing)*.
+
+![Inference API First Time](./img/hugging-face-inference-api-first-time.png)
+
+4. On the new modal, click the **Token** dropdown then click **+ New access token**.
+
+![Inference API New Token](./img/hugging-face-inference-api-new-token.png)
+
+5. On the access tokens page, click the **New Token** button.
+
+![Access Token Page](./img/hugging-face-access-token.png)
+
+6. Create a new access token with the **Write** permission.
+
+![Create Access Token Modal](./img/hugging-face-create-access-token.png)
+
+7. Go back to the Model Deploy > Inference API page [here](https://huggingface.co/meta-llama/Llama-2-7b-chat-hf?inference_api=true). Your newly created access token should now be populated in the **Token** section.
+
+## Updating your CP4M config from Inference API
+7. Copy and paste the *API_URL* on the Deploy Inference API modal to your CP4M config file in the "\[\[plugins]] endpoint" entry. If you are using the Llama-2-7b-chat-hf model, it should be "https://api-inference.huggingface.co/models/meta-llama/Llama-2-7b-chat-hf".
+
+![Inference API code](./img/hugging-face-inference-api-code.png)
+
+8. Click **Show API token**. Copy and paste this API token to your CP4M config file in the "\[\[plugins]] api_key" entry.
+
+Congratulations! You have now successfully set up CP4M with Llama via Hugging Face.

docs/docs/connecting-your-llm/connecting-openai.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 2
+---
+
+# Connecting to OpenAI
+
+Coming soon...

docs/docs/intro.md

@@ -2,49 +2,115 @@
 sidebar_position: 1
 ---
 
-# Tutorial Intro
+# Introduction
 
-Let's discover **Docusaurus in less than 5 minutes**.
+Conversational Platform for Marketing (CP4M) is a middleware service which enables developers to easily integrate their user-facing LLM chatbots with messaging platforms like Whatsapp and Facebook Messenger. CP4M can help scale your chatbot's traffic to billions of people globally **in less than an hour** of development time.
 
-## Getting Started
+![System Diagram](./img/cp4m_diagram.png)
 
-Get started by **creating a new site**.
+## Getting Started
 
-Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
+ Clone the open source project from [GitHub](https://github.com/facebookincubator/CP4M).
 
-### What you'll need
+```bash
+git clone git@github.com:facebookincubator/CP4M.git
+```
 
-- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
-    - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
 
-## Generate a new site
+### Set up your configuration file
 
-Generate a new Docusaurus site using the **classic template**.
+1. Create an empty file
+```bash
+mkdir /tmp/cp4m
+touch /tmp/cp4m/cp4m.toml
+```
 
-The classic template will automatically be added to your project after you run the command:
+2. Copy the relevant configuration contents into your file
 
+**Example: Whatsapp w/ OpenAI**
 ```bash
-npm init docusaurus@latest my-website classic
+port = 8080
+
+[[plugins]]
+name = "openai_test"
+type = "openai"
+model = "gpt-3.5-turbo"
+api_key = "<your api key here>"
+
+[[stores]]
+name = "memory_test"
+type = "memory"
+storage_duration_hours = 1
+storage_capacity_mbs = 1
+
+[[handlers]]
+type = "whatsapp"
+name = "whatsapp_test"
+verify_token = "<your verification token here>"
+app_secret = "<your verification app secret here>"
+access_token = "<you access token here>"
+
+[[services]]
+webhook_path = "/<your webhook pathname here>"
+plugin = "openai_test"
+store = "memory_test"
+handler = "whatsapp_test"
 ```
 
-You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code
-editor.
 
-The command also installs all necessary dependencies you need to run Docusaurus.
+**Example: Messenger & Whatsapp w/ Llama 2 (via Hugging Face)**
+```bash
+port = 8080
+
+[[plugins]]
+name = "hf_test"
+type = "hugging_face"
+endpoint = "<your hugging face api url here>"
+token_limit = 1000
+api_key = "<your hugging face api key here>"
+
+[[stores]]
+name = "memory_test"
+type = "memory"
+storage_duration_hours = 1
+storage_capacity_mbs = 1
+
+[[handlers]]
+name = "messenger_test"
+type = "messenger"
+verify_token = "<your messenger verification token here>"
+app_secret = "<your messenger verification app secret here>"
+page_access_token = "<your messenger page access token here>"
+
+[[handlers]]
+name = "whatsapp_test"
+type = "whatsapp"
+verify_token = "<your verification token here>"
+app_secret = "<your verification app secret here>"
+access_token = "<you access token here>"
+
+[[services]]
+webhook_path = "/<your webhook pathname here>"
+plugin = "hf_test"
+store = "memory_test"
+handler = "messenger_test"
+
+[[services]]
+webhook_path = "/<your webhook pathname here>"
+plugin = "hf_test"
+store = "memory_test"
+handler = "whatsapp_test"
+```
 
-## Start your site
 
-Run the development server:
 
-```bash
-cd my-website
-npm run start
-```
+For help finding tokens & secrets for your app in the handlers section, please go to the relevant messaging page in [Messaging Integrations](./category/messaging-integrations). For help finding the api_key for your LLM plugin, please go to the relevant LLM page in [LLM Connections](./category/connecting-your-llm).
 
-The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site,
-you'll need to navigate the terminal there.
+If there is another LLM plugin not listed above that you would like to use, please contact cp4m@meta.com.
 
-The `npm run start` command builds your website locally and serves it through a development server, ready for you to
-view at http://localhost:3000/.
+### Build and Run CP4M via Docker
 
-Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
+```bash
+docker build -t cp4m .
+docker run -v /tmp/cp4m:/tmp/cp4m -e CP4M_CONFIGURATION_FILE=/tmp/cp4m/cp4m.toml -p 8080:8080 cp4m
+```

docs/docs/messaging-integrations/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Messaging Integrations",
+  "position": 3,
+  "link": {
+    "type": "generated-index",
+    "description": "Learn how to integrate CP4M with your messaging accounts like Whatsapp."
+  }
+}

docs/docs/messaging-integrations/connecting-to-instagram-direct.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 2
+---
+
+# Connecting to Instagram Direct
+
+Coming soon...

docs/docs/messaging-integrations/connecting-to-messenger.md

@@ -0,0 +1,51 @@
+---
+sidebar_position: 1
+---
+
+# Connecting to Messenger
+
+To connect CP4M to Facebook Messenger, you will need:
+1. A Facebook account registered as a Meta developer
+2. A Meta app to integrate with Meta APIs
+3. A Facebook Page for users to interact with over Messenger
+
+## Getting Meta developer access
+To register as a Meta developer, you can follow the steps [here](https://developers.facebook.com/docs/development/register).
+
+## Creating a Meta app
+You can see all of your existing Meta developer apps in the [Meta Developer App Dashboard](https://developers.facebook.com/apps/).
+
+To create a new app, click on the **Create App** button. The steps for the app creation process are detailed [here](https://developers.facebook.com/docs/development/create-an-app).
+
+## Create a Facebook page
+If you don't already have a Facebook page for Messenger interactions, you can follow the steps [here](https://www.facebook.com/business/help/1199464373557428?id=418112142508425) to create a new page.
+
+## Enabling Messenger API Access on your Meta app
+In the [Meta Developer App Dashboard](https://developers.facebook.com/apps/):
+1. Click on your Meta app
+2. On the **Dashboard** page, find the **Add products to your app** section.
+3. On the **Messenger** tile, click the **Set up** button.
+
+![Messenger Developer Dashboard](./img/meta_developer_dashboard_messenger.png)
+
+4. On the "1. Configure webhooks" section, click the **Configure** button.
+
+![Configure webhooks setup](./img/meta_developer_messenger_webhooks.png)
+
+5. Follow the steps in the [Messenger Webhooks documentation](https://developers.facebook.com/docs/messenger-platform/webhooks) to configure the Callback URL and Verification Token for your server.
+
+![Callback URL Setup](./img/meta_developer_messenger_callback_url.png)
+
+6. On the "2. Generate access tokens" section, click the **Add Subscriptions** button on an existing Facebook page which you would like your app to have Messenger API access.
+
+![Messenger add subscriptions](./img/meta_developer_messenger_add_subscriptions.png)
+
+7. At minimum, select the following Page Subscriptions. Learn more about all the Page Subscription options [here](https://developers.facebook.com/docs/messenger-platform/webhooks#subscribe-to-meta-webhooks):
+a. messages
+b. messaging_postbacks
+
+8. Click the **Confirm** button to save your page subscription choices.
+
+![Messenger choose subscriptions](./img/meta_developer_messenger_choose_subscriptions.png)
+
+9. Finally, on the "3. Complete App Review" section, follow the steps to complete the App Review process so that your app can access production data. You can learn more about Meta's app review process [here](https://developers.facebook.com/docs/resp-plat-initiatives/app-review).

docs/docs/messaging-integrations/connecting-to-whatsapp.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 3
+---
+
+# Connecting to Whatsapp
+
+Coming soon...

docs/docs/system-architecture.md

@@ -0,0 +1,7 @@
+---
+sidebar_position: 2
+---
+
+# System Architecture
+
+Coming soon...