Skip to content
This repository was archived by the owner on Mar 6, 2025. It is now read-only.

Commit 54116fc

Browse files
cvalenzuelacvalenzuela
committed
update im2txt examples and add better comments
1 parent 86f5dcf commit 54116fc

6 files changed

Lines changed: 275 additions & 55 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,9 @@
55
"projectName": "RunwayML",
66
"useSingleLineStyle": true
77
},
8+
"cSpell.words": [
9+
"cristobal",
10+
"cristóbal",
11+
"runwayml"
12+
],
813
}

‎im2txt/index.html‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎im2txt/receivesOnly/index.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!--
2+
Copyright (C) 2018 Cristobal Valenzuela
3+
4+
This file is part of RunwayML.
5+
6+
RunwayML is free software: you can redistribute it and/or modify
7+
it under the terms of the GNU General Public License as published by
8+
the Free Software Foundation, either version 3 of the License, or
9+
(at your option) any later version.
10+
11+
RunwayML is distributed in the hope that it will be useful,
12+
but WITHOUT ANY WARRANTY; without even the implied warranty of
13+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14+
GNU General Public License for more details.
15+
16+
You should have received a copy of the GNU General Public License
17+
along with RunwayML. If not, see <http://www.gnu.org/licenses/>.
18+
19+
-->
20+
21+
<!--
22+
This examples has the bare minimum to establish
23+
a socket connection with Runway and the im2txt model
24+
25+
Cristóbal Valenzuela
26+
[email protected]
27+
-->
28+
29+
<!DOCTYPE HTML>
30+
<html>
31+
32+
<head>
33+
<title>Runway: im2txt Demo</title>
34+
<!-- We are using socket.io to establish a socket connection to Runway -->
35+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
36+
<style>
37+
* {
38+
font-family: Arial, Helvetica, sans-serif;
39+
font-weight: lighter;
40+
}
41+
</style>
42+
</head>
43+
44+
<body>
45+
46+
<!-- Information about the model -->
47+
<div>
48+
<h2>im2txt Demo: receiving data coming from Runway</h2>
49+
<p>About the model: The im2txt is a model, developed by Google, that uses a deep neural network to learn how to describe the content of images. Basically you can give it any image and it will output a short caption or description of the image.</p>
50+
<p>More information: <a href="https://runwayml.com/tutorials/im2txt/">https://runwayml.com/tutorials/im2txt/</a></p>
51+
<hr />
52+
</div>
53+
54+
<!-- An element to show whatever is coming from Runway -->
55+
<h3>Output</h3>
56+
<p id="status">Not Connected</p>
57+
<p>Result: <span id="log"></span></p>
58+
59+
<!-- The main script -->
60+
<script src="script.js"></script>
61+
</body>
62+
63+
</html>

‎im2txt/receivesOnly/script.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Copyright (C) 2018 Cristobal Valenzuela
2+
//
3+
// This file is part of RunwayML.
4+
//
5+
// RunwayML is free software: you can redistribute it and/or modify
6+
// it under the terms of the GNU General Public License as published by
7+
// the Free Software Foundation, either version 3 of the License, or
8+
// (at your option) any later version.
9+
//
10+
// RunwayML is distributed in the hope that it will be useful,
11+
// but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
// GNU General Public License for more details.
14+
//
15+
// You should have received a copy of the GNU General Public License
16+
// along with RunwayML. If not, see <http://www.gnu.org/licenses/>.
17+
//
18+
// ===============================================================
19+
//
20+
// Runway: im2txt receiving data Demo
21+
// This example just receives incoming data from Runway.
22+
// No need to send images or data from here.
23+
24+
// Create a connection to the Runway HTTP Server
25+
// *You should update this address to match the URL provided by the app
26+
var socket = io.connect('http://127.0.0.1:3333');
27+
28+
// Wait until the page is loaded
29+
document.addEventListener("DOMContentLoaded", function(event) {
30+
31+
// Get the DOM log element
32+
var status = document.getElementById('status');
33+
var log = document.getElementById('log');
34+
35+
// When a connection is established
36+
socket.on('connect', function() {
37+
status.innerHTML = 'Connected';
38+
});
39+
40+
// When there is a data event, update the log element
41+
socket.on('data', function(data) {
42+
log.innerHTML = data.results[0].caption;
43+
});
44+
});

‎im2txt/sendImages/index.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!--
2+
Copyright (C) 2018 Cristobal Valenzuela
3+
4+
This file is part of RunwayML.
5+
6+
RunwayML is free software: you can redistribute it and/or modify
7+
it under the terms of the GNU General Public License as published by
8+
the Free Software Foundation, either version 3 of the License, or
9+
(at your option) any later version.
10+
11+
RunwayML is distributed in the hope that it will be useful,
12+
but WITHOUT ANY WARRANTY; without even the implied warranty of
13+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14+
GNU General Public License for more details.
15+
16+
You should have received a copy of the GNU General Public License
17+
along with RunwayML. If not, see <http://www.gnu.org/licenses/>.
18+
19+
-->
20+
21+
<!--
22+
This example creates a video stream and send images to Runway
23+
24+
Cristóbal Valenzuela
25+
[email protected]
26+
-->
27+
28+
<!DOCTYPE HTML>
29+
<html>
30+
31+
<head>
32+
<title>Runway: im2txt Demo</title>
33+
<!-- We are using socket.io to establish a socket connection to Runway -->
34+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
35+
<style>
36+
* {
37+
font-family: Arial, Helvetica, sans-serif;
38+
font-weight: lighter;
39+
}
40+
video{
41+
display:block
42+
}
43+
44+
</style>
45+
</head>
46+
47+
<body>
48+
49+
<!-- Information about the model -->
50+
<div>
51+
<h2>im2txt Demo: sending live webcam stream to Runway</h2>
52+
<p>About the model: The im2txt is a model, developed by Google, that uses a deep neural network to learn how to describe the content of images. Basically you can give it any image and it will output a short caption or description of the image.</p>
53+
<p>More information: <a href="https://runwayml.com/tutorials/im2txt/">https://runwayml.com/tutorials/im2txt/</a></p>
54+
<hr />
55+
</div>
56+
57+
<!-- Connection status -->
58+
<p id="status">Not Connected</p>
59+
60+
<!-- Camera -->
61+
<h3>Camera</h3>
62+
<video width="300" height="280"></video>
63+
64+
<!-- Canvas: Just to send base64 images to Runway -->
65+
<canvas width="300" height="280" style="display: none;"></canvas>
66+
67+
<!-- Control Buttos -->
68+
<button id="start">Start</button>
69+
<button id="stop">Stop</button>
70+
71+
<!-- Result -->
72+
<p>Result: <span id="log"></span></p>
73+
74+
<!-- The main script -->
75+
<script src="script.js"></script>
76+
</body>
77+
78+
</html>

‎im2txt/sendImages/script.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
// Copyright (C) 2018 Cristobal Valenzuela
2+
//
3+
// This file is part of RunwayML.
4+
//
5+
// RunwayML is free software: you can redistribute it and/or modify
6+
// it under the terms of the GNU General Public License as published by
7+
// the Free Software Foundation, either version 3 of the License, or
8+
// (at your option) any later version.
9+
//
10+
// RunwayML is distributed in the hope that it will be useful,
11+
// but WITHOUT ANY WARRANTY; without even the implied warranty of
12+
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+
// GNU General Public License for more details.
14+
//
15+
// You should have received a copy of the GNU General Public License
16+
// along with RunwayML. If not, see <http://www.gnu.org/licenses/>.
17+
//
18+
// ===============================================================
19+
//
20+
// Runway: im2txt Webcam Demo
21+
// This example sends images from your webcam and receives incoming data from Runway.
22+
23+
// Create a connection to the Runway HTTP Server
24+
// *You should update this address to match the URL provided by the app
25+
var socket = io.connect('http://10.0.1.5:33100/query');
26+
27+
// Wait until the page is loaded
28+
document.addEventListener("DOMContentLoaded", function(event) {
29+
// Get the DOM elements
30+
var status = document.getElementById('status');
31+
var log = document.getElementById('log');
32+
var startBtn = document.getElementById('start');
33+
var stopBtn = document.getElementById('stop');
34+
var video = document.querySelector('video');
35+
var canvas = document.querySelector('canvas');
36+
var ctx = canvas.getContext('2d');
37+
var localMediaStream = null;
38+
var shouldLoop = false;
39+
40+
// Get the user's camera
41+
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
42+
navigator.mediaDevices.getUserMedia({ video: true })
43+
.then((stream) => {
44+
video.src = window.URL.createObjectURL(stream);
45+
video.play();
46+
});
47+
}
48+
49+
// When a connection is established
50+
socket.on('connect', function() {
51+
status.innerHTML = 'Connected';
52+
});
53+
54+
// When there is new data coming in, update the log element
55+
socket.on('update_response', function(data) {
56+
log.innerHTML = data.results[0].caption;
57+
if (shouldLoop) {
58+
sendImage();
59+
}
60+
});
61+
62+
// Get the current frame and send it to Runway using the Canvas API
63+
function sendImage() {
64+
ctx.drawImage(video, 0, 0, 300, 280);
65+
// Send to Runway the current element in the canvas
66+
socket.emit('update_request', {
67+
data: canvas.toDataURL('image/jpeg')
68+
});
69+
}
70+
71+
// Start the loop: send an image, wait for response, send another one...
72+
function start() {
73+
shouldLoop = true;
74+
sendImage()
75+
}
76+
77+
// Stop the loop
78+
function stop() {
79+
shouldLoop = false;
80+
}
81+
82+
// Listen to start and stop event
83+
startBtn.addEventListener('click', start, false);
84+
stopBtn.addEventListener('click', stop, false);
85+
});

0 commit comments

Comments
 (0)