-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (138 loc) · 4.27 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<html>
<head>
<title>Welcome to the Fishion Show!</title>
<script src="web/psoofword.js"></script>
<style>
html, body {
background-color: #000;
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body id="fishionshow">
<h1 id="obj" hidden>FISHION SHOW!</h1>
<script>
( async () => {
if( window.psoofkey !== "" ) {
console.log( "YES WE HAZ KEY" );
}
if( window.pexelspsoof !== "" ) {
console.log( "YES WE HAZ PEXELS KEY" );
}
const endpoint = "https://fishionshow.cognitiveservices.azure.com/";
let images = await getFishionShowImages();
setInterval( () => {
nextFishionQueue();
}, 10000 );
nextFishionQueue();
async function nextFishionQueue() {
let index = getRandomInt( images.length );
let url = images[ index ].src.original;
let thumbnail = images[ index ].src.large2x;
document.getElementById( "fishionshow" ).style.backgroundImage = `url(${url})`;
let detected = await detectObject( thumbnail );
let description = await lookupInfo( thumbnail );
document.getElementById( "obj" ).innerText = detected ? detected.object : "";
if( detected ) {
await speakText( `It looks like ${detected.object}` );
}
await speakText( description );
}
let voicesFirstLoad = true;
let voicesLoading = false;
async function speakText( text ) {
return new Promise( ( resolve, reject ) => {
// list of languages is probably not loaded, wait for it
if( window.speechSynthesis.getVoices().length === 0 ) {
if( !voicesLoading ) {
voicesLoading = true;
window.speechSynthesis.addEventListener( 'voiceschanged', async function() {
if( voicesFirstLoad ) {
voicesFirstLoad = false;
console.log( "voiceschanged" );
await speakText( text );
resolve();
}
});
}
}
else {
// languages list available, no need to wait
var available_voices = window.speechSynthesis.getVoices();
// this will hold an english voice
var english_voice = '';
// find voice by language locale "en-US"
// if not then select the first voice
let english_voices = available_voices.filter( x => x.lang === "en-US" );
// new SpeechSynthesisUtterance object
var utter = new SpeechSynthesisUtterance();
utter.rate = 1;
utter.pitch = 0.5 + Math.random();
utter.text = text;
utter.voice = english_voices[ getRandomInt( english_voices.length ) ];
// event after text has been spoken
utter.onend = function() {
// alert('Speech has finished');
resolve();
}
// speak
window.speechSynthesis.speak(utter);
}
});
}
async function lookupInfo( url ) {
let result = await fetch( `${endpoint}vision/v3.0/analyze?visualFeatures=Description`, {
method: "POST",
headers: {
'Content-Type': 'application/json',
"ocp-apim-subscription-key": window.psoofkey
},
body: JSON.stringify( {
url: url
})
} ).then( r => r.json() );
console.log( result );
if( result.description && result.description.captions && result.description.captions.length > 0 ) {
return result.description.captions[ 0 ].text;
}
return "";
}
async function getFishionShowImages() {
let images = await fetch( `https://api.pexels.com/v1/search?per_page=80&query=underwater fish`, {
headers: {
"Authorization": window.pexelspsoof
}
} ).then( r => r.json() );
console.log( images );
return images.photos;
}
async function detectObject( url ) {
let result = await fetch( `${endpoint}vision/v3.0/detect?visualFeatures=Description`, {
method: "POST",
headers: {
'Content-Type': 'application/json',
"ocp-apim-subscription-key": window.psoofkey
},
body: JSON.stringify( {
url: url
})
} ).then( r => r.json() );
let objects = result.objects || [];
objects = objects.filter( x => x.object !== "person" );
console.log( result );
return objects[ 0 ];
}
function getRandomInt( number ) {
return Math.floor( number * Math.random() );
}
})();
</script>
</body>
</html>