README.md

---
title: Computer Vision Playground
emoji: 🦀
colorFrom: indigo
colorTo: blue
sdk: streamlit
sdk_version: 1.36.0
app_file: app.py
pinned: false
license: mit
---

# Computer Vision Playground

This Streamlit application streams video from the webcam, analyzes facial sentiment, and displays the results in real-time. It serves as a playground for computer vision projects, with an example facial sentiment analysis demo.

For how to embed this space into an existing webpage see the example [index.html](https://huggingface.co/spaces/eusholli/sentiment-analyzer/blob/main/index.html) page.
For further instructions and guidance from Hugging Face see [here](https://huggingface.co/docs/hub/en/spaces-embed)

## How to Use

1. Clone the repository.
2. Ensure you have the necessary packages installed: `pip install -r requirements.txt`
3. Run the application: `streamlit run app.py`

## Create Your Own Analysis Space

Follow these steps to set up and modify the application for your own image analysis:

### Step 1: Clone the Repository

First, you need to clone the repository to your local machine. Open your terminal or command prompt and run:

```sh
git clone https://huggingface.co/spaces/eusholli/computer-vision-playground
cd computer-vision-playground
```


### Step 2: Install Dependencies

Make sure you have Python installed on your machine. You can download it from [python.org](https://www.python.org/).

Next, install the required packages. In the terminal, navigate to the cloned repository directory and run:

```sh
pip install -r requirements.txt
```

This will install all the necessary libraries specified in the \`requirements.txt\` file.

### Step 3: Run the Application

To start the Streamlit application, run:

```sh
streamlit run app.py
```

This will open a new tab in your default web browser with the Streamlit interface.

## Using the Application

#### Webcam Stream

- Allow access to your webcam when prompted.
- You will see the live stream from your webcam in the "Input Stream" section.
- The application will analyze the video frames in real-time and display the sentiment results in the "Analysis" section.

#### Uploading Images

- In the "Input Stream" section, under "Upload an Image", click on the "Choose an image..." button.
- Select an image file (jpg, jpeg, png) from your computer.
- The application will analyze the uploaded image and display the analysis results.

#### Image URL

- In the "Input Stream" section, under "Or Enter Image URL", paste an image URL and press Enter.
- The application will download and analyze the image from the provided URL and display the analysis results.

#### YouTube URL

- In the "Youtube URL" section, under "Enter a YouTube URL", paste a YouTube URL and press Enter.
- The application will stream and analyze the video directly from YouTube and display the analysis results.

#### Uploading Videos

- In the "Input Stream" section, under "Upload a Video", click on the "Choose a video..." button.
- Select a video file (mp4, avi, mov, mkv) from your computer.
- The application will analyze the video frames and display the analysis results.

#### Video URL

- In the "Input Stream" section, under "Or Enter Video Download URL", paste a video URL and press Enter.
- The application will download and analyze the video from the provided URL and display the analysis results.

## Customize the Analysis

You can customize the analysis function to perform your own image analysis. The default function \`analyze_frame\` performs facial sentiment analysis. To use your own analysis:

1. Replace the contents of the \`analyze_frame\` function in \`app.py\` with your custom analysis code.
2. Update any necessary imports at the top of the \`app.py\` file.
3. Adjust the \`ANALYSIS_TITLE\` variable to reflect your custom analysis.

Example:

```python
ANALYSIS_TITLE = "Custom Analysis"

def analyze_frame(frame: np.ndarray):
    # Your custom analysis code here
    ...
```

### Troubleshooting

If you encounter any issues:

- Ensure all dependencies are correctly installed.
- Check that your webcam is working and accessible.
- Verify the URLs you provide are correct and accessible.

For more detailed information, refer to the comments in the \`app.py\` file.


### Debugging using Vscode

If you are using Vscode as your IDE you can use the following launch.json file to debug the current file (e.g. app.py) in your editor.

```json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python:Streamlit",
            "type": "debugpy",
            "request": "launch",
            "module": "streamlit",
            "args": [
                "run",
                "${file}",
                "--server.port",
                "2000"
            ]
        }
    ]
}
```


# How to Create a New Huggingface Space and Push Code to It

## Step 1: Create a New Huggingface Space
1. Log in to your [Huggingface](https://huggingface.co/) account.
2. Go to the [Spaces](https://huggingface.co/spaces) section.
3. Click on the **Create new Space** button.
4. Fill in the details for your new Space:
    - **Space name**: Choose a unique name for your Space.
    - **Owner**: Ensure your username is selected.
    - **Visibility**: Choose between Public or Private based on your preference.
    - **SDK**: Select the SDK you will use (in this case`streamlit`).
5. Click on the **Create Space** button to create your new Space.

## Step 2: Change the Local Git Remote Repo Reference
1. Open your terminal or command prompt.
2. Navigate to your local project directory:
    ```bash
    cd /path/to/your/project
    ```
3. Remove the existing remote reference (if any):
    ```bash
    git remote remove origin
    ```
4. Add the new remote reference pointing to your newly created Huggingface Space. Replace `<your-username>` and `<your-space-name>` with your actual Huggingface username and Space name:
    ```bash
    git remote add origin https://huggingface.co/spaces/<your-username>/<your-space-name>.git
    ```

## Step 3: Add, Commit, and Push the Code to the New Space
1. Stage all the changes in your local project directory:
    ```bash
    git add .
    ```
2. Commit the changes with a meaningful commit message:
    ```bash
    git commit -m "Initial commit to Huggingface Space"
    ```
3. Push the changes to the new Huggingface Space:
    ```bash
    git push origin main
    ```

> **Note**: If your default branch is not `main`, replace `main` with the appropriate branch name in the push command.

## Conclusion
You have now successfully created a new Huggingface Space, updated your local Git remote reference, and pushed your code to the new Space. You can verify that your code has been uploaded by visiting your Huggingface Space's URL.

## Webcam STUN/TURN Server

When running remotely on Huggingface, the code needs to access your remote webcam. It does this using the [streamlit-webrtc](https://github.com/whitphx/streamlit-webrtc) module but requires a Twilio account to be established and the credentials uploaded to the Huggingface space.

### How to Create a Free Twilio Account and Add Credentials to Huggingface Space Settings

#### Step 1: Create a Free Twilio Account
1. Go to the [Twilio Sign-Up Page](https://www.twilio.com/try-twilio).
2. Fill in your details to create a new account.
3. Verify your email address and phone number.
4. After verification, log in to your Twilio dashboard.

#### Step 2: Obtain `TWILIO_ACCOUNT_SID` and `TWILIO_AUTH_TOKEN`
1. In the Twilio dashboard, navigate to the **Console**.
2. Look for the **Account Info** section on the dashboard.
3. Here, you will find your `Account SID` (referred to as `TWILIO_ACCOUNT_SID`).
4. To obtain your `Auth Token` (referred to as `TWILIO_AUTH_TOKEN`), click on the **Show** button next to the `Auth Token`.

#### Step 3: Add Twilio Credentials to Huggingface Space Settings
1. Log in to your [Huggingface](https://huggingface.co/) account.
2. Navigate to your Huggingface Space where you need to add the credentials.
3. Go to the **Settings** of your Space.
4. In the **Variables and secrets** section:
    - Click on the **New variable** button to add `TWILIO_ACCOUNT_SID`:
        - Name: `TWILIO_ACCOUNT_SID`
        - Value: Copy your `Account SID` from the Twilio dashboard and paste it here.
    - Click on the **New secret** button to add `TWILIO_AUTH_TOKEN`:
        - Name: `TWILIO_AUTH_TOKEN`
        - Value: Copy your `Auth Token` from the Twilio dashboard and paste it here.

5. Save the changes.

You have now successfully added your Twilio credentials to the Huggingface Space settings. Your application should now be able to access and use the Twilio API for WebRTC functionality.




### Contributing

We welcome contributions! If you have suggestions or improvements, feel free to open an issue or submit a pull request.

### License

This project is licensed under the MIT License.