eusholli commited on
Commit
152d4ee
1 Parent(s): 1d7d4c7

add example embed index.html and link in README

Browse files
Files changed (2) hide show
  1. README.md +12 -4
  2. index.html +35 -0
README.md CHANGED
@@ -14,6 +14,9 @@ license: mit
14
 
15
  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.
16
 
 
 
 
17
  ## How to Use
18
 
19
  1. Clone the repository.
@@ -68,23 +71,28 @@ This will open a new tab in your default web browser with the Streamlit interfac
68
 
69
  - In the "Input Stream" section, under "Upload an Image", click on the "Choose an image..." button.
70
  - Select an image file (jpg, jpeg, png) from your computer.
71
- - The application will analyze the uploaded image and display the sentiment results.
72
 
73
  #### Image URL
74
 
75
  - In the "Input Stream" section, under "Or Enter Image URL", paste an image URL and press Enter.
76
- - The application will download and analyze the image from the provided URL and display the sentiment results.
 
 
 
 
 
77
 
78
  #### Uploading Videos
79
 
80
  - In the "Input Stream" section, under "Upload a Video", click on the "Choose a video..." button.
81
  - Select a video file (mp4, avi, mov, mkv) from your computer.
82
- - The application will analyze the video frames and display the sentiment results.
83
 
84
  #### Video URL
85
 
86
  - In the "Input Stream" section, under "Or Enter Video Download URL", paste a video URL and press Enter.
87
- - The application will download and analyze the video from the provided URL and display the sentiment results.
88
 
89
  ## Customize the Analysis
90
 
 
14
 
15
  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.
16
 
17
+ 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.
18
+ For further instructions and guidance from Hugging Face see [here](https://huggingface.co/docs/hub/en/spaces-embed)
19
+
20
  ## How to Use
21
 
22
  1. Clone the repository.
 
71
 
72
  - In the "Input Stream" section, under "Upload an Image", click on the "Choose an image..." button.
73
  - Select an image file (jpg, jpeg, png) from your computer.
74
+ - The application will analyze the uploaded image and display the analysis results.
75
 
76
  #### Image URL
77
 
78
  - In the "Input Stream" section, under "Or Enter Image URL", paste an image URL and press Enter.
79
+ - The application will download and analyze the image from the provided URL and display the analysis results.
80
+
81
+ #### YouTube URL
82
+
83
+ - In the "Youtube URL" section, under "Enter a YouTube URL", paste a YouTube URL and press Enter.
84
+ - The application will stream and analyze the video directly from YouTube and display the analysis results.
85
 
86
  #### Uploading Videos
87
 
88
  - In the "Input Stream" section, under "Upload a Video", click on the "Choose a video..." button.
89
  - Select a video file (mp4, avi, mov, mkv) from your computer.
90
+ - The application will analyze the video frames and display the analysis results.
91
 
92
  #### Video URL
93
 
94
  - In the "Input Stream" section, under "Or Enter Video Download URL", paste a video URL and press Enter.
95
+ - The application will download and analyze the video from the provided URL and display the analysis results.
96
 
97
  ## Customize the Analysis
98
 
index.html ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Embed Streamlit App</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ margin: 0;
12
+ padding: 0;
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ height: 100vh;
17
+ background-color: #f0f0f0;
18
+ }
19
+
20
+ .iframe-container {
21
+ width: 80%;
22
+ height: 90vh;
23
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
24
+ }
25
+ </style>
26
+ </head>
27
+
28
+ <body>
29
+ <div class="iframe-container">
30
+ <iframe src="https://eusholli-computer-vision-playground.hf.space" width="100%" height="100%"
31
+ style="border:none;"></iframe>
32
+ </div>
33
+ </body>
34
+
35
+ </html>