62 lines
2.1 KiB
Svelte
62 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { apiKeyStorage } from './Storage.svelte'
|
|
|
|
$: apiKey = $apiKeyStorage
|
|
|
|
</script>
|
|
|
|
<article class="message">
|
|
<div class="message-body">
|
|
<strong><a href="https://github.com/Niek/chatgpt-web">ChatGPT-web</a></strong>
|
|
is a simple one-page web interface to the OpenAI ChatGPT API. To use it, you need to register for
|
|
<a href="https://platform.openai.com/account/api-keys" target="_blank" rel="noreferrer">an OpenAI API key</a>
|
|
first. OpenAI bills per token (usage-based), which means it is a lot cheaper than
|
|
<a href="https://openai.com/blog/chatgpt-plus" target="_blank" rel="noreferrer">ChatGPT Plus</a>, unless you use
|
|
more than 10 million tokens per month. All messages are stored in your browser's local storage, so everything is
|
|
<strong>private</strong>. You can also close the browser tab and come back later to continue the conversation.
|
|
</div>
|
|
</article>
|
|
<article class="message" class:is-danger={!apiKey} class:is-warning={apiKey}>
|
|
<div class="message-body">
|
|
Set your OpenAI API key below:
|
|
|
|
<form
|
|
class="field has-addons has-addons-right"
|
|
on:submit|preventDefault={(event) => {
|
|
if (event.target && event.target[0].value) {
|
|
apiKeyStorage.set(event.target[0].value)
|
|
}
|
|
}}
|
|
>
|
|
<p class="control is-expanded">
|
|
<input
|
|
aria-label="OpenAI API key"
|
|
type="password"
|
|
autocomplete="off"
|
|
class="input"
|
|
class:is-danger={!apiKey}
|
|
value={apiKey}
|
|
/>
|
|
</p>
|
|
<p class="control">
|
|
<button class="button is-info" type="submit">Save</button>
|
|
</p>
|
|
</form>
|
|
|
|
{#if !apiKey}
|
|
<p class="help is-danger">
|
|
Please enter your <a href="https://platform.openai.com/account/api-keys">OpenAI API key</a> above to use ChatGPT-web.
|
|
It is required to use ChatGPT-web.
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
</article>
|
|
{#if apiKey}
|
|
<article class="message is-info">
|
|
<div class="message-body">
|
|
Select an existing chat on the sidebar, or
|
|
<a href={'#/chat/new'}>create a new chat</a>
|
|
</div>
|
|
</article>
|
|
{/if}
|