heimoshuiyu/chatgpt-api-web
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix overflow api card

Browse Source
This commit is contained in:
ecwu
2024-07-17 11:34:39 +08:00
parent c2c17e5956
commit 9d0f93ecf6
2 changed files with 89 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/setAPIsTemplate.tsx
View File

@@ -17,7 +17,7 @@ export function SetAPIsTemplate({
}: Props) { }: Props) {
return ( return (
<button <button
className="btn btn-primary btn-sm" className="btn btn-primary btn-sm mt-3"
onClick={() => { onClick={() => {
const name = prompt(`Give this **${label}** template a name:`); const name = prompt(`Give this **${label}** template a name:`);
if (!name) { if (!name) {

188
src/settings.tsx
View File

@@ -759,31 +759,28 @@ export default (props: {
<input type="radio" name="setting-accordion" /> <input type="radio" name="setting-accordion" />
<div class="collapse-title text-xl font-medium">Chat</div> <div class="collapse-title text-xl font-medium">Chat</div>
<div class="collapse-content"> <div class="collapse-content">
<div class="card bg-base-100 w-full shadow-xl"> <div>
<div class="card-body"> <h2 class="card-title">Chat API</h2>
<h2 class="card-title">Chat API</h2> <p>
<p> <Input
<Input field="apiKey"
field="apiKey" help="OPEN AI API 密钥，请勿泄漏此密钥"
help="OPEN AI API 密钥，请勿泄漏此密钥" {...props}
{...props} />
/> <Input
<Input field="apiEndpoint"
field="apiEndpoint" help="API 端点，方便在不支持的地区使用反向代理服务，默认为 https://api.openai.com/v1/chat/completions"
help="API 端点，方便在不支持的地区使用反向代理服务，默认为 https://api.openai.com/v1/chat/completions" {...props}
{...props} />
/> </p>
</p> <SetAPIsTemplate
<div class="card-actions justify-end"> label="Chat API"
<SetAPIsTemplate endpoint={props.chatStore.apiEndpoint}
label="Chat API" APIkey={props.chatStore.apiKey}
endpoint={props.chatStore.apiEndpoint} tmps={props.templateAPIs}
APIkey={props.chatStore.apiKey} setTmps={props.setTemplateAPIs}
tmps={props.templateAPIs} />
setTmps={props.setTemplateAPIs} <div class="divider" />
/>
</div>
</div>
</div> </div>
<SelectModel <SelectModel
help="模型，默认 3.5。不同模型性能和定价也不同，请参考 API 文档。" help="模型，默认 3.5。不同模型性能和定价也不同，请参考 API 文档。"
@@ -860,31 +857,28 @@ export default (props: {
Speech Recognition Speech Recognition
</div> </div>
<div class="collapse-content"> <div class="collapse-content">
<div class="card bg-base-100 w-full shadow-xl"> <div>
<div class="card-body"> <h2 class="card-title">Whisper API</h2>
<h2 class="card-title">Whisper API</h2> <p>
<p> <Input
<Input field="whisper_key"
field="whisper_key" help="用于 Whisper 服务的 key，默认为 上方使用的OPENAI key，可在此单独配置专用key"
help="用于 Whisper 服务的 key，默认为 上方使用的OPENAI key，可在此单独配置专用key" {...props}
{...props} />
/> <Input
<Input field="whisper_api"
field="whisper_api" help="Whisper 语言转文字服务，填入此api才会开启，默认为 https://api.openai.com/v1/audio/transriptions"
help="Whisper 语言转文字服务，填入此api才会开启，默认为 https://api.openai.com/v1/audio/transriptions" {...props}
{...props} />
/> </p>
</p> <SetAPIsTemplate
<div class="card-actions justify-end"> label="Whisper API"
<SetAPIsTemplate endpoint={props.chatStore.whisper_api}
label="Whisper API" APIkey={props.chatStore.whisper_key}
endpoint={props.chatStore.whisper_api} tmps={props.templateAPIsWhisper}
APIkey={props.chatStore.whisper_key} setTmps={props.setTemplateAPIsWhisper}
tmps={props.templateAPIsWhisper} />
setTmps={props.setTemplateAPIsWhisper} <div class="divider" />
/>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -892,31 +886,28 @@ export default (props: {
<input type="radio" name="setting-accordion" /> <input type="radio" name="setting-accordion" />
<div class="collapse-title text-xl font-medium">TTS</div> <div class="collapse-title text-xl font-medium">TTS</div>
<div class="collapse-content"> <div class="collapse-content">
<div class="card bg-base-100 w-full shadow-xl"> <div>
<div class="card-body"> <h2 class="card-title">TTS API</h2>
<h2 class="card-title">TTS API</h2> <p>
<p> <Input
<Input field="tts_key"
field="tts_key" help="tts service api key"
help="tts service api key" {...props}
{...props} />
/> <Input
<Input field="tts_api"
field="tts_api" help="tts api, eg. https://api.openai.com/v1/audio/speech"
help="tts api, eg. https://api.openai.com/v1/audio/speech" {...props}
{...props} />
/> </p>
</p> <SetAPIsTemplate
<div class="card-actions justify-end"> label="TTS API"
<SetAPIsTemplate endpoint={props.chatStore.tts_api}
label="TTS API" APIkey={props.chatStore.tts_key}
endpoint={props.chatStore.tts_api} tmps={props.templateAPIsTTS}
APIkey={props.chatStore.tts_key} setTmps={props.setTemplateAPIsTTS}
tmps={props.templateAPIsTTS} />
setTmps={props.setTemplateAPIsTTS} <div class="divider" />
/>
</div>
</div>
</div> </div>
<Help help="tts voice style" field="AAAAA"> <Help help="tts voice style" field="AAAAA">
<label className="">TTS Voice</label> <label className="">TTS Voice</label>
@@ -965,31 +956,28 @@ export default (props: {
Image Generation Image Generation
</div> </div>
<div class="collapse-content"> <div class="collapse-content">
<div class="card bg-base-100 w-full shadow-xl"> <div>
<div class="card-body"> <h2 class="card-title">Image Gen API</h2>
<h2 class="card-title">Image Gen API</h2> <p>
<p> <Input
<Input field="image_gen_key"
field="image_gen_key" help="image generation service api key"
help="image generation service api key" {...props}
{...props} />
/> <Input
<Input field="image_gen_api"
field="image_gen_api" help="DALL image gen key, eg. https://api.openai.com/v1/images/generations"
help="DALL image gen key, eg. https://api.openai.com/v1/images/generations" {...props}
{...props} />
/> </p>
</p> <SetAPIsTemplate
<div class="card-actions justify-end"> label="Image Gen API"
<SetAPIsTemplate endpoint={props.chatStore.image_gen_api}
label="Image Gen API" APIkey={props.chatStore.image_gen_key}
endpoint={props.chatStore.image_gen_api} tmps={props.templateAPIsImageGen}
APIkey={props.chatStore.image_gen_key} setTmps={props.setTemplateAPIsImageGen}
tmps={props.templateAPIsImageGen} />
setTmps={props.setTemplateAPIsImageGen} <div class="divider" />
/>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>