-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
86 lines (86 loc) · 3.32 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>AI output viewer</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script>
const languageNames = new Intl.DisplayNames(navigator.languages, { type: 'language' })
const resultCard = (result, image) =>
`<div class="card mb-3">
<img id="${result.id}" src="${image}" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">${result.text}</h5>
<p class="card-text">${languageNames.of(result.lang)}</p>
</div>
</div>`
const addResult = (container, result) => {
const card = document.createElement('div')
card.classList.add('col-sm-4')
card.innerHTML = resultCard(result, result.images ? result.images[0] : '')
container.insertBefore(card, container.firstChild)
card.animate([{ opacity: 0, transform: 'scale(.8)', width: '80px' }, {}],
{ duration: 400, easing: 'ease-out' })
return card
}
const new_websocket = (dispatch) => {
const container = document.getElementById('main-content')
const textMsg = document.getElementById('main-title')
const loadingCards = {}
let cache = {}
const ws = new WebSocket(`ws://${window.location.hostname}:${window.location.port}/ws`)
ws.binaryType = "blob"
ws.onopen = () => textMsg.textContent = 'Say something...'
ws.onclose = () => textMsg.textContent = 'Disconnected...'
ws.onerror = (e) => console.log(e)
ws.onmessage = (m) => {
try {
if (typeof m.data == "string") {
const data = JSON.parse(m.data)
if ('n' in data) { // Images are following
cache = data
cache.images = []
} else {
loadingCards[data.id] = addResult(container, data)
}
} else {
const reader = new FileReader()
reader.onload = e => {
if (cache.images.push(e.target.result) == cache.n) {
const card = loadingCards[cache.id]
if (card) {
delete loadingCards[cache.id]
const img = document.getElementById(cache.id)
img.src = cache.images[0]
img.animate([{ width: 0 }, {}], { duration: 400, easing: 'ease-out' })
} else {
addResult(container, cache)
}
cache = {}
}
}
reader.readAsDataURL(m.data)
}
} catch (e) {
console.log(`Failed to handle websocket message`)
}
}
return ws
}
</script>
</head>
<body style="background-color:#eee">
<header>
<div id="searchbar" class="container">
<h1 id="main-title">Connecting...</h1>
</div>
</header>
<div class="container">
<div id="main-content" class="row"></div>
</div>
<script>
const ws = new_websocket()
</script>
</body>
</html>