-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
182 lines (146 loc) · 6.23 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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DDP test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Test Twitter DDP Processing</h3>
<input type="file" id="twitterInputField" multiple="multiple">
<button id="twitterProcess">Process twitter zip</button>
<script src="./py-worker.js" type="module"></script>
<div id="twitterOutputDiv" style="overflow:scroll; height:150px; border-style: solid;">
Your inferred interests from should appear here!
</div>
<p>-----------------------------------------------------------</p>
<h3>Test Instagram DDP Processing</h3>
<input type="file" id="instagramInputField">
<button id="instagramProcess">Process instagram zip</button>
<script src="./py-worker.js" type="module"></script>
<div id="instagramOutputDiv" style="overflow:scroll; height:150px; border-style: solid;">
Your inferred interests and topics should appear here!
</div>
<script type ="module">
import { asyncRun } from "./py-worker.js";
window.asyncRun = asyncRun
const twitterInputField = document.querySelector("#twitterInputField")
const twitterProcessButton = document.querySelector("#twitterProcess")
const twitterOutputDiv = document.getElementById("twitterOutputDiv");
const instagramInputField = document.querySelector("#instagramInputField")
const instagramProcessButton = document.querySelector("#instagramProcess")
const instagramOutputDiv = document.getElementById("instagramOutputDiv");
/*
* Python script you want to apply to your files
*/
const readTwitterScript = `
import io
import logging
logging.basicConfig(level=logging.INFO)
from scanddp import twitter
from scanddp import unzipddp
from js import array_buffer_list
def process_files_from_js(array_buffer_list):
for array_buffer in array_buffer_list:
input_zip = io.BytesIO(array_buffer.to_py().tobytes())
my_bytes = unzipddp.extract_file_from_zip(input_zip, "personalization.js")
my_dict = twitter.twitter_bytesio_to_listdict(my_bytes)
out = twitter.twitter_interests_to_list(my_dict)
return "<br>".join(out)
process_files_from_js(array_buffer_list)
`
const readInstagramScript = `
import io
import logging
logging.basicConfig(level=logging.INFO)
from scanddp import instagram
from scanddp import unzipddp
from js import array_buffer_list
def process_files_from_js(array_buffer_list):
for array_buffer in array_buffer_list:
input_zip = io.BytesIO(array_buffer.to_py().tobytes())
my_bytes = unzipddp.extract_file_from_zip(input_zip, "ads_interests.json")
my_dict = instagram.instagram_bytesio_to_dict(my_bytes)
out = instagram.instagram_interests_to_list(my_dict)
output_str = "<b>Interests:</b><br>" + "<br>".join(out)
input_zip = io.BytesIO(array_buffer.to_py().tobytes())
my_bytes = unzipddp.extract_file_from_zip(input_zip, "your_topics.json")
my_dict = instagram.instagram_bytesio_to_dict(my_bytes)
out = instagram.instagram_your_topics_to_list(my_dict)
output_str = output_str + "<br><b>topics:</b><br>" + "<br>".join(out)
return output_str
process_files_from_js(array_buffer_list)
`
/*
* Helpers functions
*/
// Promisify FileReader API
const readFileAsArrayBuffer = (inputf) => {
const fr = new FileReader()
return new Promise((resolve, reject) => {
fr.onerror = () => {
fr.abort()
reject(new DOMException(`Problem parsing input file: ${intputf}`))
}
fr.onload = () => {
resolve(fr.result)
}
fr.readAsArrayBuffer(inputf)
})
}
// Run Python script: copy from Pyodide website
async function runPythonInWebworker(script, context) {
try {
const {results, error} = await asyncRun(script, context)
if (results) {
return results
} else if (error) {
console.log("pyodideWorker error: ", error)
}
} catch (e) {
console.log(`Error runPythonInWebworker: ${e}`)
}
}
// read multiple files fr
async function handleFiles(inputField) {
let files = inputField.files
let out = []
for (let file of files) {
// if (!file.type.startsWith('text/')){ continue } // For testing only text, please change
try {
let myArrayBuffer = await readFileAsArrayBuffer(file)
out.push(myArrayBuffer)
} catch(e) {
console.log(`File cannot be read: ${e}`)
}
}
return out
}
/*
* The main program of this page
*/
// Click what should happen on button click
// Handle multiple file uploads
twitterProcessButton.addEventListener("click", () => {
processFilesHandler(readTwitterScript, twitterInputField, twitterOutputDiv)
})
instagramProcessButton.addEventListener("click", () => {
processFilesHandler(readInstagramScript, instagramInputField, instagramOutputDiv)
})
async function processFilesHandler(pythonScript, inputField, outputDiv) {
// Read files send to webworker
let arrayBufferArray = await handleFiles(inputField)
if (arrayBufferArray.length) {
const context = {array_buffer_list: arrayBufferArray}
let results = await runPythonInWebworker(pythonScript, context)
console.log(results)
outputDiv.innerHTML = results
} else {
console.log("no files")
}
}
</script>
</body>
</html>