@bearbobo/ai-script
v0.2.1
Published
TypeScript library that can run in browser
Downloads
15
Readme
AI-Script
Provides AI scripts that can run in the browser.
Usage
Direct Use in Browser
<script src="https://cdn.jsdelivr.net/npm/@bearbobo/ai-script@latest/dist/ai-script.umd.js" appKey="sk-262**********62b" baseUrl="https://api.deepseek.com" model="deepseek-chat"></script>Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI-Script Demo</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
h1 {
color: #333;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.demo-container {
background-color: #f5f5f5;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
input {
padding: 8px;
width: 300px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 8px 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
padding: 10px;
background-color: #e9f7ef;
border-radius: 4px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@bearbobo/ai-script@latest/dist/ai-script.umd.js" appKey="sk-262**********62b" baseUrl="https://api.deepseek.com" model="deepseek-chat"></script>
</head>
<body>
<h1>AI-Script Demo</h1>
<div class="demo-container">
<h2>Try it out</h2>
<p>Press button to add count: <span>0</span> clicks</p>
<button>Click me</button>
</div>
<script type="ai">
Increment the click count by 1 each time the button is clicked
</script>
</body>
</html>Development
Install Dependencies
pnpm installDevelopment Mode
pnpm devThis will start a development server, and you can access the example page in your browser at http://localhost:8080.
Build Library
pnpm buildThis will generate the following files in the dist directory:
ai-script.es.js- ES module formatai-script.umd.js- UMD format- TypeScript type definition files
Run Tests
pnpm testDOM Targeting with for Attribute
AI-Script supports targeting specific DOM elements using the for attribute. This allows the AI to focus only on a specific element and its children, rather than processing the entire page structure.
Usage
<script type="ai/prompt" for="element-id">
Implement functionality for this specific element only
</script>You can also set the for attribute dynamically when creating script elements:
const scriptElement = document.createElement('script');
scriptElement.type = 'ai/prompt';
scriptElement.textContent = promptText;
scriptElement.setAttribute('for', 'target-element-id');
document.body.appendChild(scriptElement);Benefits
- Improved Performance: The AI only processes the relevant part of the DOM
- Better Context: Provides more focused context for the AI to understand the task
- Modular Design: Allows different AI scripts to target different parts of your page
Caching Mechanism
AI-Script has a built-in caching feature that can significantly improve performance and reduce API calls. When the same prompt is used multiple times in the same page context, the caching mechanism will directly return the previous result instead of calling the API again.
Cache Configuration
You can configure the caching feature as follows:
<script
src="https://cdn.jsdelivr.net/npm/@bearbobo/ai-script@latest/dist/ai-script.umd.js"
appKey="your-api-key"
baseUrl="https://api.example.com"
model="model-name"
enableCache="true"
cacheExpiration="2592000000">
</script>Configuration Options
enableCache: Boolean value that controls whether caching is enabled, default istruecacheExpiration: Cache expiration time (milliseconds), default is 30 days (2592000000 milliseconds)
How Caching Works
- When AI-Script processes a prompt, it first calculates a hash value of the current page DOM structure
- It combines the DOM hash with the prompt content to generate a unique cache key
- It checks if a corresponding cache item exists in localStorage and has not expired
- If there's a cache hit, it directly uses the cached result and triggers the
ai-script-completeevent - If there's a cache miss, it calls the API and stores the result in the cache
Clearing the Cache
Cache data is stored in the browser's localStorage, and you can manually clear it as follows:
// Clear all AI-Script cache
localStorage.removeItem('ai-script-cache');Debugging Cache
Enable debug mode to view cache-related log information in the console:
<script
src="https://cdn.jsdelivr.net/npm/@bearbobo/ai-script@latest/dist/ai-script.umd.js"
appKey="your-api-key"
debug="true">
</script>With debug mode enabled, the console will display information about cache hits, cache storage, and cache cleaning.
License
MIT