refine setting layout
This commit is contained in:
ecwu
@@ -41,15 +41,15 @@ export function AddImage({
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-white rounded p-2 z-20"
|
||||
className="bg-base-200 p-2 z-20"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-between p-1">
|
||||
<span>Add Images</span>
|
||||
<div className="flex justify-between items-center p-1">
|
||||
<h3>Add Images</h3>
|
||||
<button
|
||||
className="m-1 p-1 border-2 bg-red-400"
|
||||
className="btn btn-sm btn-neutral"
|
||||
onClick={() => {
|
||||
setShowAddImage(false);
|
||||
}}
|
||||
@@ -57,10 +57,9 @@ export function AddImage({
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
<hr />
|
||||
<span>
|
||||
<span class="">
|
||||
<button
|
||||
className="disabled:line-through disabled:bg-slate-500 rounded m-1 p-1 border-2 bg-cyan-400 hover:bg-cyan-600"
|
||||
className="btn btn-secondary btn-sm disabled:btn-disabled"
|
||||
onClick={() => {
|
||||
const image_url = prompt("Image URL");
|
||||
if (!image_url) {
|
||||
@@ -81,7 +80,7 @@ export function AddImage({
|
||||
Add from URL
|
||||
</button>
|
||||
<button
|
||||
className="disabled:line-through disabled:bg-slate-500 rounded m-1 p-1 border-2 bg-cyan-400 hover:bg-cyan-600"
|
||||
className="btn btn-primary btn-sm disabled:btn-disabled"
|
||||
onClick={() => {
|
||||
// select file and load it to base64 image URL format
|
||||
const input = document.createElement("input");
|
||||
@@ -122,23 +121,24 @@ export function AddImage({
|
||||
<input type="checkbox" checked={enableHighResolution} />
|
||||
</span>
|
||||
</span>
|
||||
<div class="divider"></div>
|
||||
{chatStore.image_gen_api && chatStore.image_gen_key && (
|
||||
<div className="flex flex-col">
|
||||
<hr className="my-2" />
|
||||
<h3>Generate Image</h3>
|
||||
<span className="flex flex-row justify-between m-1 p-1">
|
||||
<span className="flex flex-col justify-between m-1 p-1">
|
||||
<label>Prompt: </label>
|
||||
<textarea
|
||||
className="border rounded border-gray-400"
|
||||
className="textarea textarea-sm textarea-bordered"
|
||||
value={imageGenPrompt}
|
||||
onChange={(e: any) => {
|
||||
setImageGenPrompt(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
<span className="flex flex-row justify-between m-1 p-1">
|
||||
<span className="flex flex-row justify-between items-center m-1 p-1">
|
||||
<label>Model: </label>
|
||||
<select
|
||||
class="select select-sm select-bordered"
|
||||
value={imageGenModel}
|
||||
onChange={(e: any) => {
|
||||
setImageGenModel(e.target.value);
|
||||
@@ -148,9 +148,10 @@ export function AddImage({
|
||||
<option value="dall-e-2">DALL-E 2</option>
|
||||
</select>
|
||||
</span>
|
||||
<span className="flex flex-row justify-between m-1 p-1">
|
||||
<span className="flex flex-row justify-between items-center m-1 p-1">
|
||||
<label>n: </label>
|
||||
<input
|
||||
class="input input-sm input-bordered"
|
||||
value={imageGenN}
|
||||
type="number"
|
||||
min={1}
|
||||
@@ -158,9 +159,10 @@ export function AddImage({
|
||||
onChange={(e: any) => setImageGenN(parseInt(e.target.value))}
|
||||
/>
|
||||
</span>
|
||||
<span className="flex flex-row justify-between m-1 p-1">
|
||||
<span className="flex flex-row justify-between items-center m-1 p-1">
|
||||
<label>Quality: </label>
|
||||
<select
|
||||
class="select select-sm select-bordered"
|
||||
value={imageGenQuality}
|
||||
onChange={(e: any) => setImageGEnQuality(e.target.value)}
|
||||
>
|
||||
@@ -168,9 +170,10 @@ export function AddImage({
|
||||
<option value="standard">Standard</option>
|
||||
</select>
|
||||
</span>
|
||||
<span className="flex flex-row justify-between m-1 p-1">
|
||||
<span className="flex flex-row justify-between items-center m-1 p-1">
|
||||
<label>Response Format: </label>
|
||||
<select
|
||||
class="select select-sm select-bordered"
|
||||
value={imageGenResponseFormat}
|
||||
onChange={(e: any) => setImageGenResponseFormat(e.target.value)}
|
||||
>
|
||||
@@ -178,9 +181,10 @@ export function AddImage({
|
||||
<option value="url">url</option>
|
||||
</select>
|
||||
</span>
|
||||
<span className="flex flex-row justify-between m-1 p-1">
|
||||
<span className="flex flex-row justify-between items-center m-1 p-1">
|
||||
<label>Size: </label>
|
||||
<select
|
||||
class="select select-sm select-bordered"
|
||||
value={imageGenSize}
|
||||
onChange={(e: any) => setImageGenSize(e.target.value)}
|
||||
>
|
||||
@@ -191,9 +195,10 @@ export function AddImage({
|
||||
<option value="1024x1792">1024x1792 (dall-e-3)</option>
|
||||
</select>
|
||||
</span>
|
||||
<span className="flex flex-row justify-between m-1 p-1">
|
||||
<span className="flex flex-row justify-between items-center m-1 p-1">
|
||||
<label>Style (only dall-e-3): </label>
|
||||
<select
|
||||
class="select select-sm select-bordered"
|
||||
value={imageGenStyle}
|
||||
onChange={(e: any) => setImageGenStyle(e.target.value)}
|
||||
>
|
||||
@@ -201,9 +206,9 @@ export function AddImage({
|
||||
<option value="natural">natural</option>
|
||||
</select>
|
||||
</span>
|
||||
<span className="flex flex-row justify-between m-1 p-1">
|
||||
<span className="flex flex-row justify-between items-center m-1 p-1">
|
||||
<button
|
||||
className="bg-sky-400 m-1 p-1 rounded disabled:bg-slate-500"
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={imageGenGenerating}
|
||||
onClick={async () => {
|
||||
try {
|
||||
|
||||
@@ -170,9 +170,9 @@ export default function Message(props: Props) {
|
||||
)}
|
||||
</div>
|
||||
<div class="chat-footer opacity-50 flex gap-x-2">
|
||||
<TTSPlay chat={chat} />
|
||||
<DeleteIcon />
|
||||
<button onClick={() => setShowEdit(true)}>Edit</button>
|
||||
<CopyIcon textToCopy={getMessageText(chat)} />
|
||||
{chatStore.tts_api && chatStore.tts_key && (
|
||||
<TTSButton
|
||||
chatStore={chatStore}
|
||||
@@ -180,7 +180,7 @@ export default function Message(props: Props) {
|
||||
setChatStore={setChatStore}
|
||||
/>
|
||||
)}
|
||||
<CopyIcon textToCopy={getMessageText(chat)} />
|
||||
<TTSPlay chat={chat} />
|
||||
</div>
|
||||
</div>
|
||||
{showEdit && (
|
||||
|
||||
@@ -22,7 +22,7 @@ export function MessageDetail({ chat, renderMarkdown }: Props) {
|
||||
)
|
||||
) : (
|
||||
<img
|
||||
className="cursor-pointer max-w-xs max-h-32 p-1"
|
||||
className="my-2 rounded-md max-w-64 max-h-64"
|
||||
src={mdt.image_url?.url}
|
||||
onClick={() => {
|
||||
window.open(mdt.image_url?.url, "_blank");
|
||||
|
||||
@@ -17,7 +17,7 @@ export function SetAPIsTemplate({
|
||||
}: Props) {
|
||||
return (
|
||||
<button
|
||||
className="p-1 m-1 rounded bg-blue-300"
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => {
|
||||
const name = prompt(`Give this **${label}** template a name:`);
|
||||
if (!name) {
|
||||
|
||||
192
src/settings.tsx
192
src/settings.tsx
@@ -191,8 +191,7 @@ const Input = (props: {
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="join">
|
||||
<label class="input input-bordered flex items-center gap-2 join-item grow">
|
||||
<label class="input input-bordered flex items-center gap-2 grow">
|
||||
{hideInput ? (
|
||||
<EyeIcon
|
||||
class="w-4 h-4"
|
||||
@@ -221,7 +220,6 @@ const Input = (props: {
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</Help>
|
||||
);
|
||||
};
|
||||
@@ -254,7 +252,7 @@ const Slicer = (props: {
|
||||
};
|
||||
return (
|
||||
<Help help={props.help} field={props.field}>
|
||||
<span>
|
||||
<span class="py-3">
|
||||
<div class="form-control">
|
||||
<label class="flex gap-2">
|
||||
<span class="label-text flex items-center gap-2">
|
||||
@@ -342,7 +340,7 @@ const Number = (props: {
|
||||
</button>
|
||||
{props.field === "maxGenTokens" && (
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer">
|
||||
<label class="label grow">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={props.chatStore.maxGenTokens_enabled}
|
||||
@@ -366,7 +364,7 @@ const Number = (props: {
|
||||
!props.chatStore.maxGenTokens_enabled
|
||||
}
|
||||
type="number"
|
||||
className="input input-bordered input-sm w-full max-w-xs"
|
||||
className="input input-bordered input-sm w-full"
|
||||
value={props.chatStore[props.field]}
|
||||
onChange={(event: any) => {
|
||||
console.log("type", typeof event.target.value);
|
||||
@@ -477,14 +475,12 @@ export default (props: {
|
||||
onClick={(event: any) => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
className="px-6 pt-2 pb-4 rounded-lg h-fit lg:w-2/3 z-20 shadow-2xl bg-base-200"
|
||||
className="modal-box"
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-xl">
|
||||
<span>{Tr("Settings")}</span>
|
||||
</h3>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h3 class="text-lg font-bold">{Tr("Settings")}</h3>
|
||||
<button
|
||||
className="btn"
|
||||
class="btn btn-secondary btn-sm"
|
||||
onClick={() => {
|
||||
props.setShow(false);
|
||||
}}
|
||||
@@ -492,22 +488,19 @@ export default (props: {
|
||||
{Tr("Close")}
|
||||
</button>
|
||||
</div>
|
||||
<div role="tablist" class="tabs tabs-lifted pt-2 w-full">
|
||||
<input
|
||||
type="radio"
|
||||
name="setting_tab"
|
||||
role="tab"
|
||||
class="tab"
|
||||
aria-label="Session"
|
||||
/>
|
||||
<div
|
||||
role="tabpanel"
|
||||
class="tab-content bg-base-100 border-base-300 rounded-box p-6"
|
||||
>
|
||||
<p>
|
||||
{Tr("Total cost in this session")} $
|
||||
{props.chatStore.cost.toFixed(4)}
|
||||
</p>
|
||||
<div class="join join-vertical w-full">
|
||||
<div class="join-item collapse collapse-plus bg-base-200">
|
||||
<input type="radio" name="setting-accordion" />
|
||||
<div class="collapse-title text-xl font-medium">Session</div>
|
||||
<div class="collapse-content">
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-title">Session cost</div>
|
||||
<div class="stat-value">
|
||||
{props.chatStore.cost.toFixed(4)} $
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LongInput
|
||||
label="System Prompt"
|
||||
field="systemMessageContent"
|
||||
@@ -556,35 +549,35 @@ export default (props: {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="radio"
|
||||
name="setting_tab"
|
||||
role="tab"
|
||||
class="tab"
|
||||
aria-label="System"
|
||||
/>
|
||||
<div
|
||||
role="tabpanel"
|
||||
class="tab-content bg-base-100 border-base-300 rounded-box p-6"
|
||||
>
|
||||
<div className="flex justify-between">
|
||||
<div class="join join-vertical lg:join-horizontal">
|
||||
<p class="btn no-animation join-item">
|
||||
{Tr("Accumulated cost in all sessions")} $
|
||||
{totalCost.toFixed(4)}
|
||||
</p>
|
||||
<button
|
||||
class="btn join-item"
|
||||
</div>
|
||||
<div class="join-item collapse collapse-plus bg-base-200">
|
||||
<input type="radio" name="setting-accordion" />
|
||||
<div class="collapse-title text-xl font-medium">System</div>
|
||||
<div class="collapse-content">
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-title">Accumulated cost</div>
|
||||
<div class="stat-value">{totalCost.toFixed(4)} $</div>
|
||||
<div class="stat-desc">
|
||||
in all sessions -{" "}
|
||||
<a
|
||||
class="btn btn-xs btn-primary"
|
||||
onClick={() => {
|
||||
clearTotalCost();
|
||||
setTotalCost(getTotalCost());
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<label class="form-control w-full max-w-xs">
|
||||
</div>
|
||||
<Choice
|
||||
field="develop_mode"
|
||||
help="开发者模式，开启后会显示更多选项及功能"
|
||||
{...props}
|
||||
/>
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">Theme Switch</span>
|
||||
</div>
|
||||
@@ -601,7 +594,7 @@ export default (props: {
|
||||
<option value="black">Black</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="form-control w-full max-w-xs">
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">Language</span>
|
||||
</div>
|
||||
@@ -620,12 +613,13 @@ export default (props: {
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<div class="join pt-2">
|
||||
<button class="btn btn-info join-item no-animation">
|
||||
<CogIcon class="w-6 h-6" />
|
||||
</button>
|
||||
<label class="form-control w-full">
|
||||
<div class="label">
|
||||
<span class="label-text">Quick Actions</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<button
|
||||
class="btn join-item"
|
||||
class="btn btn-sm btn-outline btn-neural"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(link);
|
||||
alert(tr(`Copied link:`, langCode) + `${link}`);
|
||||
@@ -634,10 +628,12 @@ export default (props: {
|
||||
{Tr("Copy Setting Link")}
|
||||
</button>
|
||||
<button
|
||||
class="btn join-item"
|
||||
class="btn btn-sm btn-outline btn-neural"
|
||||
onClick={() => {
|
||||
if (
|
||||
!confirm(tr("Are you sure to clear all history?", langCode))
|
||||
!confirm(
|
||||
tr("Are you sure to clear all history?", langCode)
|
||||
)
|
||||
)
|
||||
return;
|
||||
props.chatStore.history = props.chatStore.history.filter(
|
||||
@@ -650,7 +646,7 @@ export default (props: {
|
||||
{Tr("Clear History")}
|
||||
</button>
|
||||
<button
|
||||
class="btn join-item"
|
||||
class="btn btn-sm btn-outline btn-neural"
|
||||
onClick={() => {
|
||||
let dataStr =
|
||||
"data:text/json;charset=utf-8," +
|
||||
@@ -671,7 +667,7 @@ export default (props: {
|
||||
{Tr("Export")}
|
||||
</button>
|
||||
<button
|
||||
class="btn join-item"
|
||||
class="btn btn-sm btn-outline btn-neural"
|
||||
onClick={() => {
|
||||
const name = prompt(
|
||||
tr("Give this template a name:", langCode)
|
||||
@@ -700,7 +696,7 @@ export default (props: {
|
||||
{Tr("As template")}
|
||||
</button>
|
||||
<button
|
||||
class="btn join-item"
|
||||
class="btn btn-sm btn-outline btn-neural"
|
||||
onClick={() => {
|
||||
if (
|
||||
!confirm(
|
||||
@@ -717,6 +713,7 @@ export default (props: {
|
||||
>
|
||||
Import
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
className="hidden"
|
||||
ref={importFileRef}
|
||||
@@ -755,19 +752,13 @@ export default (props: {
|
||||
reader.readAsText(file);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="radio"
|
||||
name="setting_tab"
|
||||
role="tab"
|
||||
class="tab"
|
||||
aria-label="Chat"
|
||||
/>
|
||||
<div
|
||||
role="tabpanel"
|
||||
class="tab-content bg-base-100 border-base-300 rounded-box p-6"
|
||||
>
|
||||
<div class="join-item collapse collapse-plus bg-base-200">
|
||||
<input type="radio" name="setting-accordion" />
|
||||
<div class="collapse-title text-xl font-medium">Chat</div>
|
||||
<div class="collapse-content">
|
||||
<div class="card bg-base-100 w-full shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Chat API</h2>
|
||||
@@ -811,11 +802,6 @@ export default (props: {
|
||||
{...props}
|
||||
/>
|
||||
<Choice field="logprobs" help="返回每个Token的概率" {...props} />
|
||||
<Choice
|
||||
field="develop_mode"
|
||||
help="开发者模式，开启后会显示更多选项及功能"
|
||||
{...props}
|
||||
/>
|
||||
<Number
|
||||
field="maxTokens"
|
||||
help="最大上下文 token 数量。此值会根据选择的模型自动设置。"
|
||||
@@ -867,18 +853,13 @@ export default (props: {
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
name="setting_tab"
|
||||
role="tab"
|
||||
class="tab"
|
||||
aria-label="Speech Recognition"
|
||||
/>
|
||||
<div
|
||||
role="tabpanel"
|
||||
class="tab-content bg-base-100 border-base-300 rounded-box p-6"
|
||||
>
|
||||
</div>
|
||||
<div class="join-item collapse collapse-plus bg-base-200">
|
||||
<input type="radio" name="setting-accordion" />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
Speech Recognition
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<div class="card bg-base-100 w-full shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Whisper API</h2>
|
||||
@@ -906,17 +887,11 @@ export default (props: {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="radio"
|
||||
name="setting_tab"
|
||||
role="tab"
|
||||
class="tab"
|
||||
aria-label="TTS"
|
||||
/>
|
||||
<div
|
||||
role="tabpanel"
|
||||
class="tab-content bg-base-100 border-base-300 rounded-box p-6"
|
||||
>
|
||||
</div>
|
||||
<div class="join-item collapse collapse-plus bg-base-200">
|
||||
<input type="radio" name="setting-accordion" />
|
||||
<div class="collapse-title text-xl font-medium">TTS</div>
|
||||
<div class="collapse-content">
|
||||
<div class="card bg-base-100 w-full shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">TTS API</h2>
|
||||
@@ -983,17 +958,13 @@ export default (props: {
|
||||
</select>
|
||||
</Help>
|
||||
</div>
|
||||
<input
|
||||
type="radio"
|
||||
name="setting_tab"
|
||||
role="tab"
|
||||
class="tab"
|
||||
aria-label="Image Gen"
|
||||
/>
|
||||
<div
|
||||
role="tabpanel"
|
||||
class="tab-content bg-base-100 border-base-300 rounded-box p-6"
|
||||
>
|
||||
</div>
|
||||
<div class="join-item collapse collapse-plus bg-base-200">
|
||||
<input type="radio" name="setting-accordion" />
|
||||
<div class="collapse-title text-xl font-medium">
|
||||
Image Generation
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<div class="card bg-base-100 w-full shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">Image Gen API</h2>
|
||||
@@ -1022,6 +993,7 @@ export default (props: {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-4 pb-2">
|
||||
<p className="text-center">
|
||||
chatgpt-api-web ChatStore {Tr("Version")}{" "}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useMemo, useState } from "preact/hooks";
|
||||
import { ChatStore, ChatStoreMessage, addTotalCost } from "./app";
|
||||
import { Message, getMessageText } from "./chatgpt";
|
||||
import { SpeakerWaveIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
interface TTSProps {
|
||||
chatStore: ChatStore;
|
||||
@@ -78,7 +79,11 @@ export default function TTSButton(props: TTSProps) {
|
||||
});
|
||||
}}
|
||||
>
|
||||
{generating ? "🤔" : "🔈"}
|
||||
{generating ? (
|
||||
<span class="loading loading-dots loading-xs"></span>
|
||||
) : (
|
||||
<SpeakerWaveIcon class="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user