Initial commit
This commit is contained in:
Niek van der Maas
commit
d4e3c40df1
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"recommendations": ["svelte.svelte-vscode"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
# ChatGPT-web
|
||||||
|
|
||||||
|
ChatGPT-web is a simple one-page web interface to the OpenAI ChatGPT model. To use it, you need to register for an API key at https://platform.openai.com/account/api-keys first. All messages are stored in your browser's local storage, so you can close the tab and come back later to continue the conversation.
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
To run the development server, run
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm ci
|
||||||
|
npm run dev # or: npm run publish
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/src/assets/logo.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>ChatGTP-web</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"name": "chatgpt-web",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"check": "svelte-check --tsconfig ./tsconfig.json"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@microsoft/fetch-event-source": "^2.0.1",
|
||||||
|
"@sveltejs/vite-plugin-svelte": "^2.0.2",
|
||||||
|
"@tsconfig/svelte": "^3.0.0",
|
||||||
|
"@types/marked": "^4.0.8",
|
||||||
|
"bulma": "^0.9.4",
|
||||||
|
"marked": "^4.2.12",
|
||||||
|
"sass": "^1.58.3",
|
||||||
|
"svelte": "^3.55.1",
|
||||||
|
"svelte-check": "^2.10.3",
|
||||||
|
"svelte-local-storage-store": "^0.4.0",
|
||||||
|
"tslib": "^2.5.0",
|
||||||
|
"typescript": "^4.9.3",
|
||||||
|
"vite": "^4.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,102 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import logo from "./assets/logo.svg";
|
||||||
|
import Chat from "./lib/Chat.svelte";
|
||||||
|
import {
|
||||||
|
addChat,
|
||||||
|
apiKeyStorage,
|
||||||
|
chatsStorage,
|
||||||
|
clearChats,
|
||||||
|
} from "./lib/Storage.svelte";
|
||||||
|
|
||||||
|
$: sortedChats = $chatsStorage.sort((a, b) => b.id - a.id);
|
||||||
|
$: apiKey = $apiKeyStorage;
|
||||||
|
|
||||||
|
let activeChatId: number;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<nav class="navbar" aria-label="main navigation">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
<a class="navbar-item" href="/">
|
||||||
|
<img src={logo} alt="ChatGPT-web" width="28" height="28" />
|
||||||
|
<p class="ml-2 is-size-4 has-text-weight-bold">ChatGPT-web</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y-missing-attribute a11y-click-events-have-key-events -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container is-fluid">
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column is-one-fifth">
|
||||||
|
<article class="panel is-link">
|
||||||
|
<p class="panel-heading">Chats</p>
|
||||||
|
{#if sortedChats.length === 0 || !apiKey}
|
||||||
|
<a class="panel-block">No chats...</a>
|
||||||
|
{:else}
|
||||||
|
{#each sortedChats as chat}
|
||||||
|
<a class="panel-block" on:click={() => (activeChatId = chat.id)}
|
||||||
|
>Chat {chat.id}</a
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</article>
|
||||||
|
<article class="panel is-link">
|
||||||
|
<a
|
||||||
|
class="panel-block {!apiKey ? 'is-disabled' : ''}"
|
||||||
|
on:click={() => {
|
||||||
|
activeChatId = addChat();
|
||||||
|
}}>➕ New chat</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="panel-block {!apiKey ? 'is-disabled' : ''}"
|
||||||
|
on:click={() => {
|
||||||
|
clearChats();
|
||||||
|
activeChatId = null;
|
||||||
|
}}>🗑️ Clear chats</a
|
||||||
|
>
|
||||||
|
|
||||||
|
<a
|
||||||
|
class="panel-block {!apiKey ? 'is-disabled' : ''}"
|
||||||
|
on:click={() => {
|
||||||
|
activeChatId = null;
|
||||||
|
}}>🔙 Back to home</a
|
||||||
|
>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
{#if activeChatId}
|
||||||
|
<Chat chatId={activeChatId} />
|
||||||
|
{:else}
|
||||||
|
<article class="message {!apiKey ? 'is-danger' : 'is-warning'}">
|
||||||
|
<div class="message-body">
|
||||||
|
Set your OpenAI API key below:
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="input {!apiKey ? 'is-danger' : ''}"
|
||||||
|
value={apiKey}
|
||||||
|
on:change={(event) => {
|
||||||
|
// @ts-ignore
|
||||||
|
apiKeyStorage.set(event.target.value);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{#if !apiKey}
|
||||||
|
<p class="help is-danger">
|
||||||
|
Please enter your OpenAI API key above to use ChatGPT-web
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="message is-info">
|
||||||
|
<div class="message-body">
|
||||||
|
Select an existing chat on the sidebar, or <a
|
||||||
|
on:click={() => {
|
||||||
|
activeChatId = addChat();
|
||||||
|
}}>create a new chat</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
@keyframes rotating {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotate {
|
||||||
|
animation: rotating 10s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.is-disabled {
|
||||||
|
pointer-events: none;
|
||||||
|
cursor: default;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.9 KiB |
|
|
@ -0,0 +1,168 @@
|
||||||
|
<script lang="ts">
|
||||||
|
//import { fetchEventSource } from "@microsoft/fetch-event-source";
|
||||||
|
|
||||||
|
import {
|
||||||
|
apiKeyStorage,
|
||||||
|
chatsStorage,
|
||||||
|
addMessage,
|
||||||
|
clearMessages,
|
||||||
|
} from "./Storage.svelte";
|
||||||
|
import type { Message } from "./Types.svelte";
|
||||||
|
|
||||||
|
import { marked } from "marked";
|
||||||
|
import { afterUpdate, onMount } from "svelte";
|
||||||
|
|
||||||
|
export let chatId: number;
|
||||||
|
let updating: boolean = false;
|
||||||
|
|
||||||
|
let input: HTMLInputElement;
|
||||||
|
$: chat = $chatsStorage.find((chat) => chat.id === chatId);
|
||||||
|
const token_price = 0.000002; // $0.002 per 1000 tokens
|
||||||
|
|
||||||
|
// Focus the input on mount
|
||||||
|
onMount(() => input.focus());
|
||||||
|
|
||||||
|
// Scroll to the bottom of the chat on update
|
||||||
|
afterUpdate(() => {
|
||||||
|
// Scroll to the bottom of the page after any updates to the messages array
|
||||||
|
window.scrollTo(0, document.body.scrollHeight);
|
||||||
|
input.focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
const send = async () => {
|
||||||
|
// Compose the input message
|
||||||
|
const inputMessage: Message = { role: "user", content: input.value };
|
||||||
|
addMessage(chatId, inputMessage);
|
||||||
|
|
||||||
|
// Clear the input value
|
||||||
|
input.value = "";
|
||||||
|
|
||||||
|
// Show updating bar
|
||||||
|
updating = true;
|
||||||
|
|
||||||
|
// Send API request
|
||||||
|
/*
|
||||||
|
await fetchEventSource("https://api.openai.com/v1/chat/completions", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
Authorization:
|
||||||
|
`Bearer ${$apiKeyStorage}`,
|
||||||
|
"Content-Type": "text/event-stream",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
model: "gpt-3.5-turbo",
|
||||||
|
messages, // Provide the previous messages as well for context
|
||||||
|
// temperature: 1
|
||||||
|
// top_p: 1
|
||||||
|
// n: 1
|
||||||
|
stream: false,
|
||||||
|
// stop: null
|
||||||
|
max_tokens: 4096,
|
||||||
|
}),
|
||||||
|
onmessage(ev) {
|
||||||
|
console.log(ev);
|
||||||
|
},
|
||||||
|
onerror(err) {
|
||||||
|
throw err;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
const response = await (
|
||||||
|
await fetch("https://api.openai.com/v1/chat/completions", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${$apiKeyStorage}`,
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
model: "gpt-3.5-turbo",
|
||||||
|
// Remove the usage property from all messages
|
||||||
|
messages: chat.messages.map((message): Message => {
|
||||||
|
const { usage, ...rest } = message;
|
||||||
|
return rest;
|
||||||
|
}),
|
||||||
|
// Provide the previous messages as well for context
|
||||||
|
// temperature: 1
|
||||||
|
// top_p: 1
|
||||||
|
// n: 1
|
||||||
|
//stream: false,
|
||||||
|
// stop: null
|
||||||
|
//max_tokens: 4096,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
).json();
|
||||||
|
|
||||||
|
console.log(response);
|
||||||
|
|
||||||
|
// Hide updating bar
|
||||||
|
updating = false;
|
||||||
|
|
||||||
|
if (response.error) {
|
||||||
|
addMessage(chatId, {
|
||||||
|
role: "system",
|
||||||
|
content: `Error: ${response.error.message}`,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
response.choices.map((choice) => {
|
||||||
|
choice.message.usage = response.usage;
|
||||||
|
addMessage(chatId, choice.message);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="button is-danger is-pulled-right"
|
||||||
|
on:click={() => {
|
||||||
|
clearMessages(chatId);
|
||||||
|
}}>Clear messages</button
|
||||||
|
>
|
||||||
|
|
||||||
|
<p class="subtitle">Chat {chatId}</p>
|
||||||
|
|
||||||
|
{#each chat.messages as message}
|
||||||
|
{#if message.role === "user"}
|
||||||
|
<article class="message is-info has-text-right">
|
||||||
|
<div class="message-body">{@html marked(message.content)}</div>
|
||||||
|
</article>
|
||||||
|
{:else if message.role === "system"}
|
||||||
|
<article class="message is-danger">
|
||||||
|
<div class="message-body">{@html marked(message.content)}</div>
|
||||||
|
</article>
|
||||||
|
{:else}
|
||||||
|
<article class="message is-success">
|
||||||
|
<div class="message-body">
|
||||||
|
{@html marked(message.content)}
|
||||||
|
{#if message.usage}
|
||||||
|
<p class="is-size-7">
|
||||||
|
This message was generated using <span class="has-text-weight-bold"
|
||||||
|
>{message.usage.total_tokens}</span
|
||||||
|
>
|
||||||
|
tokens ~=
|
||||||
|
<span class="has-text-weight-bold"
|
||||||
|
>${(message.usage.total_tokens * token_price).toFixed(6)}</span
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#if updating}
|
||||||
|
<progress class="progress is-small is-dark" max="100" />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<form class="field has-addons has-addons-right" on:submit|preventDefault={send}>
|
||||||
|
<p class="control is-expanded">
|
||||||
|
<input
|
||||||
|
class="input is-info is-medium is-focused"
|
||||||
|
type="text"
|
||||||
|
placeholder="Type your message here..."
|
||||||
|
bind:this={input}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<button class="button is-info is-medium" type="submit">Send</button>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
<script context="module" lang="ts">
|
||||||
|
import { persisted } from "svelte-local-storage-store";
|
||||||
|
import { get } from "svelte/store";
|
||||||
|
import type { Chat, Message } from "./Types.svelte";
|
||||||
|
|
||||||
|
export const chatsStorage = persisted("chats", [] as Chat[]);
|
||||||
|
export const apiKeyStorage = persisted("apiKey", null as string);
|
||||||
|
|
||||||
|
export const addChat = (): number => {
|
||||||
|
const chats = get(chatsStorage);
|
||||||
|
|
||||||
|
// Find the max chatId
|
||||||
|
const chatId =
|
||||||
|
chats.reduce((maxId, chat) => Math.max(maxId, chat.id), 0) + 1;
|
||||||
|
|
||||||
|
// Add a new chat
|
||||||
|
chats.push({
|
||||||
|
id: chatId,
|
||||||
|
messages: [],
|
||||||
|
});
|
||||||
|
chatsStorage.set(chats);
|
||||||
|
return chatId;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const clearChats = () => {
|
||||||
|
chatsStorage.set([]);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const addMessage = (chatId: number, message: Message) => {
|
||||||
|
const chats = get(chatsStorage);
|
||||||
|
const chat = chats.find((chat) => chat.id === chatId);
|
||||||
|
chat.messages.push(message);
|
||||||
|
chatsStorage.set(chats);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const clearMessages = (chatId: number) => {
|
||||||
|
const chats = get(chatsStorage);
|
||||||
|
const chat = chats.find((chat) => chat.id === chatId);
|
||||||
|
chat.messages = [];
|
||||||
|
chatsStorage.set(chats);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deleteChat = (chatId: number) => {
|
||||||
|
const chats = get(chatsStorage);
|
||||||
|
const chatIndex = chats.findIndex((chat) => chat.id === chatId);
|
||||||
|
chats.splice(chatIndex, 1);
|
||||||
|
chatsStorage.set(chats);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<script context="module" lang="ts">
|
||||||
|
export type Chat = {
|
||||||
|
id: number;
|
||||||
|
messages: Message[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Message = {
|
||||||
|
role: "user" | "assistant" | "system";
|
||||||
|
content: string;
|
||||||
|
usage?: Usage;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Usage = {
|
||||||
|
completion_tokens: number;
|
||||||
|
prompt_tokens: number;
|
||||||
|
total_tokens: number;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import "./app.css";
|
||||||
|
import "../node_modules/bulma/";
|
||||||
|
import App from "./App.svelte";
|
||||||
|
|
||||||
|
const app = new App({
|
||||||
|
target: document.getElementById("app"),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default app;
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
/// <reference types="svelte" />
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
|
||||||
|
// for more information about preprocessors
|
||||||
|
preprocess: vitePreprocess(),
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
/**
|
||||||
|
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||||
|
* Disable checkJs if you'd like to use dynamic types in JS.
|
||||||
|
* Note that setting allowJs false does not prevent the use
|
||||||
|
* of JS in `.svelte` files.
|
||||||
|
*/
|
||||||
|
"allowJs": true,
|
||||||
|
"checkJs": true,
|
||||||
|
"isolatedModules": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node"
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [svelte()],
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue