morgan/chatgpt-web
1
0
Fork 0
mirror of https://github.com/morgan9e/chatgpt-web synced 2026-04-14 00:14:04 +09:00
Code Issues Packages Projects Releases Wiki Activity

Fix some layout issues

Browse Source
This commit is contained in:
Webifi
2023-06-01 08:02:35 -05:00
parent 427663167a
commit 2c4faa6944
5 changed files with 113 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/lib/Home.svelte
View File

@@ -1,63 +1,65 @@
<script lang="ts">
import { apiKeyStorage } from './Storage.svelte'
import { apiKeyStorage } from './Storage.svelte'
import Footer from './Footer.svelte'
$: apiKey = $apiKeyStorage
</script>
<section class="section">
<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">
<article class="message">
<div class="message-body">
Select an existing chat on the sidebar, or
<a href={'#/chat/new'}>create a new chat</a>
<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>
{/if}
<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}
</section>
<Footer pin={true} />