ai-examples/lmarena_chatbot_1b.html at main · michaelwasserman/ai-examples · GitHub

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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en">
<head>
<style>
    /* styles.css */
#ai-chat-mole {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 9999;
  flex-direction: column;
}

#ai-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #4CAF50;
  border: none;
  cursor: pointer;
  z-index: 9998;
}

.chat-container {
  padding: 10px;
  height: 400px;
  overflow-y: auto;
}

.message {
  margin: 5px 0;
  padding: 8px;
  border-radius: 5px;
}

.user-message {
  background: #E8F0FE;
  align-self: flex-end;
}

.ai-message {
  background: #f0f0f0;
  align-self: flex-end;
}

.input-area {
  display: flex;
  gap: 5px;
  padding: 10px;
}

#summary-btn {
  background: #2196F3;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
    </style>
</head>
<body>
<pre>
This example was generated by Assistant B of https://lmarena.ai/c/442cde63-32b7-46bf-be3d-dae668144711 given the initial prompt:
  - make a button that can be shown on the corner of any website. When clicked, it opens a chat mole with a helpful AI agent. The chat mole has a text field where users can submit questions about the site, which are answered by Chrome's Built-In LanguageModel (aka Prompt) API, which has been prepopulated with context about the page and overall site and any user context. There's also a button users can easily click in the chat mole to "summarize this page" which provides a short 1-2 sentence summary of the page derived from on-page text the overall site and user context.

This example was made functional with about 20 lines of code changes in about 20 minutes of msw@ tweaking the result.

Here's a conceptual implementation using Chrome Extension architecture (note: Chrome's LanguageModel API is hypothetical in this context):

```html
 See page source (modified)
```

```manifest.json
{
  "manifest_version": 3,
  "name": "AI Chat Mole",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["styles.css"]
    }
  ]
}
```

```css
  /* styles.css */ moved into head style tag ...
```

```javascript
  // content.js moved to script tag
```

Key features:
1. Floating button in bottom-right corner
2. Collapsible chat interface
3. Message history display
4. Summarization button
5. Context-aware responses using page content
6. Hypothetical Chrome LanguageModel API integration

Note: This implementation assumes a hypothetical `chrome.languageModel` API. In reality, you'd need to:
1. Use a real language model API (OpenAI, etc.)
2. Handle API authentication
3. Implement proper error handling
4. Add loading states
5. Manage user context storage

To make this work with real APIs, you'd need to:
1. Add API keys/authentication
2. Implement CORS handling
3. Add rate limiting
4. Include error messages
5. Add privacy protections for page content

Would you like me to adapt this to use a specific real API (like OpenAI's API) instead of the hypothetical Chrome API?

</pre>
<div id="ai-chat-mole">
</div>
<script>
let languageModel;
let summarizer;

document.addEventListener('DOMContentLoaded', () => {
   // Get page context
   getpageContext = () => {
        const pageContext = {
            url: window.location.href,
            title: document.title,
            text: document.body.innerText.substring(0, 5000) // Limit context length
        };
        return `The url of this page is: ${pageContext.url}, the title of this page is: ${pageContext.title}, and the text of the page is ${pageContext.text}`;
    }

  // Inject button
  const button = document.createElement('button');
  button.id = 'ai-button';
  button.innerHTML = '🤖';
  document.body.appendChild(button);

  // Inject chat mole
  const chatMole = document.createElement('div');
  chatMole.id = 'ai-chat-mole';
  chatMole.style.display = 'none';
  chatMole.innerHTML = `
    <div class="chat-container"></div>
    <div class="input-area">
      <input type="text" id="chat-input" placeholder="Ask something...">
      <button id="summary-btn">Summarize</button>
    </div>
  `;
  document.body.appendChild(chatMole);

  // Toggle visibility
  button.addEventListener('click', () => {
    chatMole.style.display = chatMole.style.display === 'none' ? 'flex' : 'none';
  });

  // Handle messages
  const chatInput = document.getElementById('chat-input');
  const chatContainer = document.querySelector('.chat-container');

  const sendMessage = (message, isUser = true) => {
    const msgDiv = document.createElement('div');
    msgDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
    msgDiv.textContent = message;
    chatContainer.appendChild(msgDiv);
    chatContainer.scrollTop = chatContainer.scrollHeight;
  };

  // Handle user input
  chatInput.addEventListener('keypress', async (e) => {
    // TODO(msw): Integrate LanguageModel Built-In AI APIs
    if (!languageModel) {
      languageModel = await LanguageModel.create();
    }
    // console.log(e.keyCode);
    // console.log(e.key);
    // if (e.keyCode == 13) {
    if (e.key === 'Enter' && chatInput.value.trim()) {
      const userMessage = chatInput.value.trim();
      sendMessage(userMessage);
      chatInput.value = '';

      // Get page context
      pageContext = getpageContext();
    //   const pageContext = {
    //     url: window.location.href,
    //     title: document.title,
    //     text: document.body.innerText.substring(0, 5000) // Limit context length
    //   };

      // Hypothetical Chrome API call
      // TODO(msw): Integrate LanguageModel Built-In AI APIs
      const response = await languageModel.prompt( "page context: " + pageContext + "\n\n Please respond to the following user message in a helpful and concise manner: " +userMessage);
      //   const response = await chrome.languageModel.generate({
      //     prompt: userMessage,
      //     context: pageContext,
      //     userContext: {} // Could include user preferences/history
      //   });

      sendMessage(response, false);
    }
  });

  // Handle summary request
  document.getElementById('summary-btn').addEventListener('click', async () => {
    // const pageContext = {
    //   url: window.location.href,
    //   text: document.body.innerText.substring(0, 5000)
    // };
    pageContext = getpageContext();

    // TODO(msw): Integrate LanguageModel Built-In AI APIs
    if (!summarizer) {
        summarizer = await Summarizer.create();
    }
    const response = await summarizer.summarize(pageContext);
    // const response = await chrome.languageModel.generate({
    //   prompt: "Summarize this page in 1-2 sentences",
    //   context: pageContext,
    //   userContext: {}
    // });

    sendMessage(`Summary: ${response}`, false);
  });
});
</script>
</body>
</html>