akemi/tailwind #1

Merged
chopper merged 4 commits from akemi/tailwind into main 2024-03-04 16:40:37 -07:00
9 changed files with 2416 additions and 11 deletions

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
node_modules
*compiled*

View file

@ -1,5 +0,0 @@
<html>
<body>
<h1>meow :3</h1>
</body>
</html>

View file

@ -1,10 +1,13 @@
{ {
"manifest_version": 3, "manifest_version": 3,
"name": "Pocket Llama", "name": "Pocket Llama",
"description": "Pocket Llama is a simple extension that allows you to send your current webpage to a Llama(LLM) and make it query-able.", "description": "Query your current webpage with Ollama",
"version": "0.0", "version": "0.1",
"action": { "action": {
"default_popup": "base.html", "default_popup": "src/main.html",
"default_icon": "logo.png" "default_icon": "assets/logo.png"
} },
} "host_permissions": [
"http://localhost/*"
]
}

2314
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

5
package.json Normal file
View file

@ -0,0 +1,5 @@
{
"devDependencies": {
"tailwindcss": "^3.4.1"
}
}

3
src/main.css Normal file
View file

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

37
src/main.html Normal file
View file

@ -0,0 +1,37 @@
<html>
<head>
<link href="main-compiled.css" rel="stylesheet" />
<script src="main.js"></script>
</head>
<body style="width: 700px; height: 400px">
<h1
class="font-sans text-xl font-semibold text-center mt-3"
>Pocket LLaMA v0.1</h1>
<div
style="height: 100%"
class="overflow-y-scroll"
>
<div class="m-6 text-base">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum elit vitae mi accumsan, at dignissim sem efficitur. Donec at tristique magna. Cras non feugiat enim. In dapibus ex est, semper egestas tortor dapibus vitae. Aliquam nec purus eu nunc porttitor semper. Nunc et hendrerit lacus. Proin id metus congue dui molestie bibendum pharetra non neque. Vivamus viverra magna non lacus tempor consectetur. Nulla odio dui, egestas sed efficitur sed, egestas id justo. Nunc vulputate, tortor et pellentesque finibus, odio justo vehicula lacus, vitae lacinia quam tellus iaculis neque. Mauris vel neque vulputate, maximus justo non, gravida ipsum. Aenean rhoncus lectus turpis, at hendrerit velit ornare efficitur. Duis ac nisl aliquam, pharetra velit congue, pulvinar justo.</p>
<p>Nullam eget felis enim. Sed suscipit at lectus in aliquet. Nullam iaculis ante sit amet nisl efficitur, sit amet tempus urna efficitur. Integer non lacus pretium, tempus purus a, pulvinar ligula. Nunc in velit pulvinar leo viverra auctor ornare eget tellus. Pellentesque aliquam nec sapien eu venenatis. Praesent dictum eu turpis ac efficitur. Nunc gravida congue velit et dapibus. Nam viverra semper ante, eget varius libero ullamcorper sit amet.</p>
<p>Ut sapien quam, luctus sit amet fermentum eget, euismod vel eros. Nam porta nisi id turpis tristique, eget facilisis mauris vestibulum. Vivamus enim ex, varius non orci ut, rhoncus tempor mauris. Suspendisse id euismod neque. Proin semper, leo a venenatis hendrerit, tellus lectus commodo erat, in rhoncus eros ipsum in arcu. Phasellus ac massa id tortor dictum tincidunt ac quis ipsum. Suspendisse ut ipsum justo. Praesent pulvinar ligula at ex feugiat, id ultricies elit aliquet.</p>
<p>Aenean rutrum ligula eros, id consequat odio tristique vel. Cras eget odio ante. Mauris suscipit quam nisl, id iaculis nisl tempor vel. Donec id felis turpis. Sed elit tellus, posuere ac faucibus vitae, maximus a est. Etiam justo arcu, sollicitudin id ultricies a, volutpat vel nisl. Suspendisse ipsum mi, aliquet sit amet dictum vitae, pharetra ac diam. Vivamus accumsan, mauris sit amet mattis aliquet, sem magna lobortis ipsum, sit amet commodo elit sem ac lectus. Sed pellentesque eros at nunc feugiat commodo. Sed mollis nunc enim, ac hendrerit nisi dictum vel. Nullam a fermentum mi. Suspendisse iaculis, orci molestie auctor ornare, tortor libero tempor nisi, at varius risus ante eget tellus. Sed tincidunt mi sit amet diam molestie euismod. In at tellus orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Morbi non dui varius, gravida velit vel, ornare justo. Fusce auctor eget libero sit amet lobortis. Aenean lectus leo, placerat eu lacus a, semper fermentum est. Morbi nibh ex, congue vitae rutrum non, sagittis a mauris. Phasellus pellentesque mauris vel ex venenatis, eget lacinia lectus molestie. Donec ut interdum orci. Etiam imperdiet augue et metus lacinia, eget malesuada sapien laoreet. Nullam ante velit, congue eget tempor quis, consectetur ut dolor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam interdum elit vitae mi accumsan, at dignissim sem efficitur. Donec at tristique magna. Cras non feugiat enim. In dapibus ex est, semper egestas tortor dapibus vitae. Aliquam nec purus eu nunc porttitor semper. Nunc et hendrerit lacus. Proin id metus congue dui molestie bibendum pharetra non neque. Vivamus viverra magna non lacus tempor consectetur. Nulla odio dui, egestas sed efficitur sed, egestas id justo. Nunc vulputate, tortor et pellentesque finibus, odio justo vehicula lacus, vitae lacinia quam tellus iaculis neque. Mauris vel neque vulputate, maximus justo non, gravida ipsum. Aenean rhoncus lectus turpis, at hendrerit velit ornare efficitur. Duis ac nisl aliquam, pharetra velit congue, pulvinar justo.</p>
<p>Nullam eget felis enim. Sed suscipit at lectus in aliquet. Nullam iaculis ante sit amet nisl efficitur, sit amet tempus urna efficitur. Integer non lacus pretium, tempus purus a, pulvinar ligula. Nunc in velit pulvinar leo viverra auctor ornare eget tellus. Pellentesque aliquam nec sapien eu venenatis. Praesent dictum eu turpis ac efficitur. Nunc gravida congue velit et dapibus. Nam viverra semper ante, eget varius libero ullamcorper sit amet.</p>
<p>Ut sapien quam, luctus sit amet fermentum eget, euismod vel eros. Nam porta nisi id turpis tristique, eget facilisis mauris vestibulum. Vivamus enim ex, varius non orci ut, rhoncus tempor mauris. Suspendisse id euismod neque. Proin semper, leo a venenatis hendrerit, tellus lectus commodo erat, in rhoncus eros ipsum in arcu. Phasellus ac massa id tortor dictum tincidunt ac quis ipsum. Suspendisse ut ipsum justo. Praesent pulvinar ligula at ex feugiat, id ultricies elit aliquet.</p>
<p>Aenean rutrum ligula eros, id consequat odio tristique vel. Cras eget odio ante. Mauris suscipit quam nisl, id iaculis nisl tempor vel. Donec id felis turpis. Sed elit tellus, posuere ac faucibus vitae, maximus a est. Etiam justo arcu, sollicitudin id ultricies a, volutpat vel nisl. Suspendisse ipsum mi, aliquet sit amet dictum vitae, pharetra ac diam. Vivamus accumsan, mauris sit amet mattis aliquet, sem magna lobortis ipsum, sit amet commodo elit sem ac lectus. Sed pellentesque eros at nunc feugiat commodo. Sed mollis nunc enim, ac hendrerit nisi dictum vel. Nullam a fermentum mi. Suspendisse iaculis, orci molestie auctor ornare, tortor libero tempor nisi, at varius risus ante eget tellus. Sed tincidunt mi sit amet diam molestie euismod. In at tellus orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Morbi non dui varius, gravida velit vel, ornare justo. Fusce auctor eget libero sit amet lobortis. Aenean lectus leo, placerat eu lacus a, semper fermentum est. Morbi nibh ex, congue vitae rutrum non, sagittis a mauris. Phasellus pellentesque mauris vel ex venenatis, eget lacinia lectus molestie. Donec ut interdum orci. Etiam imperdiet augue et metus lacinia, eget malesuada sapien laoreet. Nullam ante velit, congue eget tempor quis, consectetur ut dolor.</p>
</div>
</div>
<div class="w-full sticky top-100vh">
<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<div class="mb-4">
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Query...">
</div>
</form>
</div>
</body>
</html>

37
src/main.js Normal file
View file

@ -0,0 +1,37 @@
const ollama_get_models = async () => {
const res = await fetch('http://localhost:11434/api/tags')
if (res.status !== 200) {
console.error("Failed to make request to Ollama")
return
}
const js = await res.json()
return js
}
const ollama_chat_complete = async (model, messages) => {
const body = {
model: "gemmachad:latest",
messages: { role: "user", content: "why is the sky blue?" },
stream: false
}
console.log(body)
const res = await fetch('http://localhost:11434/api/chat', {
Review

Currently I'm getting a 403 for this one... but not for ollama_get_models? Not sure what's up

Currently I'm getting a 403 for this one... but not for `ollama_get_models`? Not sure what's up
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(body)
})
if (res.status !== 200) {
console.error("Failed to make request to Ollama")
return
}
const js = await res.json()
return js
}

9
tailwind.config.js Normal file
View file

@ -0,0 +1,9 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}