Views
No views yet
index.html:1<!-- Copyright 2024 The MediaPipe Authors.
2
3Licensed under the Apache License, Version 2.0 (the "License");
4you may not use this file except in compliance with the License.
5You may obtain a copy of the License at
6
7 http://www.apache.org/licenses/LICENSE-2.0
8
9Unless required by applicable law or agreed to in writing, software
10distributed under the License is distributed on an "AS IS" BASIS,
11WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12See the License for the specific language governing permissions and
13limitations under the License. -->
14
15<!doctype html>
16<html lang="en">
17<head>
18 <title>LLM Inference Web Demo</title>
19</head>
20<body>
21 Input:<br />
22 <textarea id="input" style="height: 300px; width: 600px"></textarea><br />
23 <input type="button" id="submit" value="Get Response" disabled /><br />
24 <br />
25 Result:<br />
26 <textarea id="output" style="height: 300px; width: 600px"></textarea>
27 <script type="module" src="index.js"></script>
28</body>
29</html>index.js(Replace line no. 23 to the path to the .bin file):1// Copyright 2024 The MediaPipe Authors.
2
3// Licensed under the Apache License, Version 2.0 (the "License");
4// you may not use this file except in compliance with the License.
5// You may obtain a copy of the License at
6
7// http://www.apache.org/licenses/LICENSE-2.0
8
9// Unless required by applicable law or agreed to in writing, software
10// distributed under the License is distributed on an "AS IS" BASIS,
11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12// See the License for the specific language governing permissions and
13// limitations under the License.
14
15// ---------------------------------------------------------------------------------------- //
16
17import {FilesetResolver, LlmInference} from 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai';
18
19const input = document.getElementById('input');
20const output = document.getElementById('output');
21const submit = document.getElementById('submit');
22
23const modelFileName = 'weights.bin'; /* PATH TO MODEL .bin */
24
25/**
26 * Display newly generated partial results to the output text box.
27 */
28function displayPartialResults(partialResults, complete) {
29 output.textContent += partialResults;
30
31 if (complete) {
32 if (!output.textContent) {
33 output.textContent = 'Result is empty';
34 }
35 submit.disabled = false;
36 }
37}
38
39/**
40 * Main function to run LLM Inference.
41 */
42async function runDemo() {
43 const genaiFileset = await FilesetResolver.forGenAiTasks(
44 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai/wasm');
45 let llmInference;
46
47 submit.onclick = () => {
48 output.textContent = '';
49 submit.disabled = true;
50 llmInference.generateResponse(input.value, displayPartialResults);
51 };
52
53 submit.value = 'Loading the model...'
54 LlmInference
55 .createFromOptions(genaiFileset, {
56 baseOptions: {modelAssetPath: modelFileName},
57 // maxTokens: 512, // The maximum number of tokens (input tokens + output
58 // // tokens) the model handles.
59 // randomSeed: 1, // The random seed used during text generation.
60 // topK: 1, // The number of tokens the model considers at each step of
61 // // generation. Limits predictions to the top k most-probable
62 // // tokens. Setting randomSeed is required for this to make
63 // // effects.
64 // temperature:
65 // 1.0, // The amount of randomness introduced during generation.
66 // // Setting randomSeed is required for this to make effects.
67 })
68 .then(llm => {
69 llmInference = llm;
70 submit.disabled = false;
71 submit.value = 'Get Response'
72 })
73 .catch(() => {
74 alert('Failed to initialize the task.');
75 });
76}
77
78runDemo();python3 -m http.server 8000 in the same directory (or python -m SimpleHTTPServer 8000 for older python versions).Open localhost:8000 in Chrome