mirror of
https://github.com/gradio-app/gradio.git
synced 2024-11-27 01:40:20 +08:00
chatbot component tweaks (#8594)
This commit is contained in:
pngwn
GitHub
parent
d35c290aad
commit
530f8a0b05
13
.changeset/clear-cloths-dream.md
Normal file
13
.changeset/clear-cloths-dream.md
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
"@gradio/audio": patch
|
||||
"@gradio/chatbot": patch
|
||||
"@gradio/gallery": patch
|
||||
"@gradio/icons": patch
|
||||
"@gradio/image": patch
|
||||
"@gradio/plot": patch
|
||||
"@gradio/video": patch
|
||||
"@gradio/wasm": patch
|
||||
"gradio": patch
|
||||
---
|
||||
|
||||
fix:chatbot component tweaks
|
||||
@ -19,7 +19,7 @@ const base = defineConfig({
|
||||
timeout: 30000,
|
||||
testMatch: /.*\.spec\.ts/,
|
||||
testDir: "..",
|
||||
workers: process.env.CI ? 1 : undefined,
|
||||
workers: 1,
|
||||
retries: 3
|
||||
});
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,6 +5,48 @@ import random
|
||||
|
||||
# Chatbot demo with multimodal input (text, markdown, LaTeX, code blocks, image, audio, & video). Plus shows support for streaming text.
|
||||
|
||||
txt = """
|
||||
Absolutely! The mycorrhizal network, often referred to as the "Wood Wide Web," is a symbiotic association between fungi and the roots of most plant species. Here’s a deeper dive into how it works and its implications:
|
||||
|
||||
### How It Works
|
||||
|
||||
1. **Symbiosis**: Mycorrhizal fungi attach to plant roots, extending far into the soil. The plant provides the fungi with carbohydrates produced via photosynthesis. In return, the fungi help the plant absorb water and essential nutrients like phosphorus and nitrogen from the soil.
|
||||
|
||||
2. **Network Formation**: The fungal hyphae (thread-like structures) connect individual plants, creating an extensive underground network. This network can link many plants together, sometimes spanning entire forests.
|
||||
|
||||
3. **Communication**: Trees and plants use this network to communicate and share resources. For example, a tree under attack by pests can send chemical signals through the mycorrhizal network to warn neighboring trees. These trees can then produce defensive chemicals to prepare for the impending threat.
|
||||
|
||||
### Benefits and Functions
|
||||
|
||||
1. **Resource Sharing**: The network allows for the redistribution of resources among plants. For instance, a large, established tree might share excess nutrients and water with smaller, younger trees, promoting overall forest health.
|
||||
|
||||
2. **Defense Mechanism**: The ability to share information about pests and diseases enhances the resilience of plant communities. This early warning system helps plants activate their defenses before they are directly affected.
|
||||
|
||||
3. **Support for Seedlings**: Young seedlings, which have limited root systems, benefit immensely from the mycorrhizal network. They receive nutrients and water from larger plants, increasing their chances of survival and growth.
|
||||
|
||||
### Ecological Impact
|
||||
|
||||
1. **Biodiversity**: The mycorrhizal network supports biodiversity by fostering a cooperative environment. Plants of different species can coexist and thrive because of the shared resources and information.
|
||||
|
||||
2. **Forest Health**: The network enhances the overall health of forests. By enabling efficient nutrient cycling and supporting plant defenses, it contributes to the stability and longevity of forest ecosystems.
|
||||
|
||||
3. **Climate Change Mitigation**: Healthy forests act as significant carbon sinks, absorbing carbon dioxide from the atmosphere. The mycorrhizal network plays a critical role in maintaining forest health and, consequently, in mitigating climate change.
|
||||
|
||||
### Research and Discoveries
|
||||
|
||||
1. **Suzanne Simard's Work**: Ecologist Suzanne Simard’s research has been pivotal in uncovering the complexities of the mycorrhizal network. She demonstrated that trees of different species can share resources and that "mother trees" (large, older trees) play a crucial role in nurturing younger plants.
|
||||
|
||||
2. **Implications for Conservation**: Understanding the mycorrhizal network has significant implications for conservation efforts. It highlights the importance of preserving not just individual trees but entire ecosystems, including the fungal networks that sustain them.
|
||||
|
||||
### Practical Applications
|
||||
|
||||
1. **Agriculture**: Farmers and horticulturists are exploring the use of mycorrhizal fungi to improve crop yields and soil health. By incorporating these fungi into agricultural practices, they can reduce the need for chemical fertilizers and enhance plant resilience.
|
||||
|
||||
2. **Reforestation**: In reforestation projects, introducing mycorrhizal fungi can accelerate the recovery of degraded lands. The fungi help establish healthy plant communities, ensuring the success of newly planted trees.
|
||||
|
||||
The "Wood Wide Web" exemplifies the intricate and often hidden connections that sustain life on Earth. It’s a reminder of the profound interdependence within natural systems and the importance of preserving these delicate relationships.
|
||||
"""
|
||||
|
||||
|
||||
def random_plot():
|
||||
df = px.data.iris()
|
||||
@ -28,7 +70,7 @@ color_map = {
|
||||
|
||||
def html_src(harm_level):
|
||||
return f"""
|
||||
<div style="display: flex; gap: 5px;padding: 2px 4px;margin-top: -40px">
|
||||
<div style="display: flex; gap: 5px;">
|
||||
<div style="background-color: {color_map[harm_level]}; padding: 2px; border-radius: 5px;">
|
||||
{harm_level}
|
||||
</div>
|
||||
@ -149,7 +191,7 @@ def bot(history, response_type):
|
||||
html_src(random.choice(["harmful", "neutral", "beneficial"]))
|
||||
)
|
||||
else:
|
||||
history[-1][1] = "Cool!"
|
||||
history[-1][1] = txt
|
||||
return history
|
||||
|
||||
|
||||
@ -160,6 +202,12 @@ with gr.Blocks(fill_height=True) as demo:
|
||||
elem_id="chatbot",
|
||||
bubble_full_width=False,
|
||||
scale=1,
|
||||
show_copy_button=True,
|
||||
avatar_images=(
|
||||
None, # os.path.join("files", "avatar.png"),
|
||||
os.path.join("files", "avatar.png"),
|
||||
),
|
||||
# layout="panel",
|
||||
)
|
||||
response_type = gr.Radio(
|
||||
[
|
||||
|
||||
@ -45,6 +45,7 @@
|
||||
pause: undefined;
|
||||
edit: undefined;
|
||||
end: undefined;
|
||||
load: undefined;
|
||||
}>();
|
||||
|
||||
const create_waveform = (): void => {
|
||||
@ -98,6 +99,10 @@
|
||||
dispatch("play");
|
||||
});
|
||||
|
||||
$: waveform?.on("load", () => {
|
||||
dispatch("load");
|
||||
});
|
||||
|
||||
const handle_trim_audio = async (
|
||||
start: number,
|
||||
end: number
|
||||
@ -149,6 +154,7 @@
|
||||
src={value.url}
|
||||
controls
|
||||
autoplay={waveform_settings.autoplay}
|
||||
on:load
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
|
||||
@ -70,6 +70,7 @@
|
||||
on:pause
|
||||
on:play
|
||||
on:stop
|
||||
on:load
|
||||
/>
|
||||
{:else}
|
||||
<Empty size="small">
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
export let likeable = false;
|
||||
export let show_share_button = false;
|
||||
export let rtl = false;
|
||||
export let show_copy_button = false;
|
||||
export let show_copy_button = true;
|
||||
export let sanitize_html = true;
|
||||
export let bubble_full_width = true;
|
||||
export let layout: "bubble" | "panel" = "bubble";
|
||||
@ -88,7 +88,7 @@
|
||||
<BlockLabel
|
||||
{show_label}
|
||||
Icon={Chat}
|
||||
float={false}
|
||||
float={true}
|
||||
label={label || "Chatbot"}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
"@gradio/theme": "workspace:^",
|
||||
"@gradio/upload": "workspace:^",
|
||||
"@gradio/utils": "workspace:^",
|
||||
"@gradio/wasm": "workspace:^",
|
||||
"@types/dompurify": "^3.0.2",
|
||||
"@types/katex": "^0.16.0",
|
||||
"@types/prismjs": "1.26.4",
|
||||
|
||||
101
js/chatbot/shared/ButtonPanel.svelte
Normal file
101
js/chatbot/shared/ButtonPanel.svelte
Normal file
@ -0,0 +1,101 @@
|
||||
<script lang="ts">
|
||||
import LikeDislike from "./LikeDislike.svelte";
|
||||
import Copy from "./Copy.svelte";
|
||||
import type { FileData } from "@gradio/client";
|
||||
import DownloadIcon from "./Download.svelte";
|
||||
import { DownloadLink } from "@gradio/wasm/svelte";
|
||||
|
||||
export let likeable: boolean;
|
||||
export let show_copy_button: boolean;
|
||||
export let show: boolean;
|
||||
export let message: Record<string, any>;
|
||||
export let position: "right" | "left";
|
||||
export let avatar: FileData | null;
|
||||
export let show_download = false;
|
||||
export let handle_action: (selected: string | null) => void;
|
||||
export let layout: "bubble" | "panel";
|
||||
|
||||
$: show_copy = show_copy_button && message && message?.type === "text";
|
||||
$: show_download =
|
||||
(show_download && message?.value?.video?.url) || message?.value?.url;
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<div
|
||||
class="message-buttons-{position} {layout} message-buttons {avatar !==
|
||||
null && 'with-avatar'}"
|
||||
>
|
||||
{#if show_copy}
|
||||
<Copy value={message.value} />
|
||||
{/if}
|
||||
{#if show_download}
|
||||
<DownloadLink
|
||||
href={message?.value?.video?.url || message?.value?.url}
|
||||
download={message?.value?.video?.orig_name ||
|
||||
message.value.orig_name ||
|
||||
"image"}
|
||||
>
|
||||
<span class="icon-wrap">
|
||||
<DownloadIcon />
|
||||
</span>
|
||||
</DownloadLink>
|
||||
{/if}
|
||||
{#if likeable && position === "left"}
|
||||
<LikeDislike {handle_action} padded={show_copy || show_download} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.icon-wrap {
|
||||
display: block;
|
||||
color: var(--body-text-color-subdued);
|
||||
}
|
||||
|
||||
.icon-wrap:hover {
|
||||
color: var(--body-text-color);
|
||||
}
|
||||
.message-buttons-right,
|
||||
.message-buttons-left {
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
height: var(--size-7);
|
||||
align-self: self-end;
|
||||
/* position: absolute; */
|
||||
bottom: -15px;
|
||||
margin: 2px;
|
||||
padding-left: 5px;
|
||||
z-index: 1;
|
||||
padding-bottom: var(--spacing-xl);
|
||||
padding: var(--spacing-md) 2px;
|
||||
}
|
||||
.message-buttons-left {
|
||||
align-self: start;
|
||||
left: 0px;
|
||||
}
|
||||
.message-buttons-right {
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.panel.message-buttons-left,
|
||||
.panel.message-buttons-right {
|
||||
margin: 10px 0 2px 0;
|
||||
}
|
||||
|
||||
.message-buttons {
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: unset;
|
||||
bottom: calc(-30px - var(--spacing-xl));
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 0px;
|
||||
}
|
||||
|
||||
.message-buttons :global(> *) {
|
||||
margin-right: 7px;
|
||||
}
|
||||
</style>
|
||||
@ -8,7 +8,8 @@
|
||||
afterUpdate,
|
||||
createEventDispatcher,
|
||||
type SvelteComponent,
|
||||
type ComponentType
|
||||
type ComponentType,
|
||||
tick
|
||||
} from "svelte";
|
||||
import { ShareButton } from "@gradio/atoms";
|
||||
import { Image } from "@gradio/image/shared";
|
||||
@ -17,10 +18,10 @@
|
||||
import type { SelectData, LikeData } from "@gradio/utils";
|
||||
import { MarkdownCode as Markdown } from "@gradio/markdown";
|
||||
import { type FileData, type Client } from "@gradio/client";
|
||||
import Copy from "./Copy.svelte";
|
||||
import type { I18nFormatter } from "js/app/src/gradio_helper";
|
||||
import LikeDislike from "./LikeDislike.svelte";
|
||||
import Pending from "./Pending.svelte";
|
||||
import Component from "./Component.svelte";
|
||||
import LikeButtons from "./ButtonPanel.svelte";
|
||||
|
||||
export let _fetch: typeof fetch;
|
||||
export let load_component: Gradio["load_component"];
|
||||
@ -135,25 +136,22 @@
|
||||
div && div.offsetHeight + div.scrollTop > div.scrollHeight - 100;
|
||||
});
|
||||
|
||||
const scroll = (): void => {
|
||||
if (autoscroll) {
|
||||
div.scrollTo(0, div.scrollHeight);
|
||||
}
|
||||
};
|
||||
async function scroll(): Promise<void> {
|
||||
await tick();
|
||||
requestAnimationFrame(() => {
|
||||
if (autoscroll) {
|
||||
div?.scrollTo(0, div.scrollHeight);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let image_preview_source: string;
|
||||
let image_preview_source_alt: string;
|
||||
let is_image_preview_open = false;
|
||||
let image_preview_close_button: HTMLButtonElement;
|
||||
|
||||
afterUpdate(() => {
|
||||
if (autoscroll || _components) {
|
||||
scroll();
|
||||
div.querySelectorAll("img").forEach((n) => {
|
||||
n.addEventListener("load", () => {
|
||||
scroll();
|
||||
});
|
||||
});
|
||||
}
|
||||
div.querySelectorAll("img").forEach((n) => {
|
||||
n.addEventListener("click", (e) => {
|
||||
@ -219,7 +217,7 @@
|
||||
aria-label="chatbot conversation"
|
||||
aria-live="polite"
|
||||
>
|
||||
<div class="message-wrap" class:bubble-gap={layout === "bubble"} use:copy>
|
||||
<div class="message-wrap" use:copy>
|
||||
{#if value !== null && value.length > 0}
|
||||
{#each value as message_pair, i}
|
||||
{#each message_pair as message, j}
|
||||
@ -231,7 +229,6 @@
|
||||
alt={image_preview_source_alt}
|
||||
/>
|
||||
<button
|
||||
bind:this={image_preview_close_button}
|
||||
class="image-preview-close-button"
|
||||
on:click={() => {
|
||||
is_image_preview_open = false;
|
||||
@ -239,7 +236,12 @@
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="message-row {layout} {j == 0 ? 'user-row' : 'bot-row'}">
|
||||
<div
|
||||
class="message-row {layout} {j == 0 ? 'user-row' : 'bot-row'}"
|
||||
class:with_avatar={avatar_images[j] !== null}
|
||||
class:with_opposite_avatar={avatar_images[j === 0 ? 1 : 0] !==
|
||||
null}
|
||||
>
|
||||
{#if avatar_images[j] !== null}
|
||||
<div class="avatar-container">
|
||||
<Image
|
||||
@ -249,160 +251,111 @@
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="message {j == 0 ? 'user' : 'bot'}"
|
||||
class:message-fit={layout === "bubble" && !bubble_full_width}
|
||||
class:panel-full-width={layout === "panel"}
|
||||
class:message-bubble-border={layout === "bubble"}
|
||||
class:message-markdown-disabled={!render_markdown}
|
||||
style:text-align={rtl && j == 0 ? "left" : "right"}
|
||||
class:component={typeof message === "object" &&
|
||||
<div class="flex-wrap">
|
||||
<div
|
||||
class="message {j == 0 ? 'user' : 'bot'} {typeof message ===
|
||||
'object' &&
|
||||
message !== null &&
|
||||
"component" in message}
|
||||
class:html={typeof message === "object" &&
|
||||
message !== null &&
|
||||
"component" in message &&
|
||||
message.component === "html"}
|
||||
>
|
||||
<button
|
||||
data-testid={j == 0 ? "user" : "bot"}
|
||||
class:latest={i === value.length - 1}
|
||||
'component' in message
|
||||
? message?.component
|
||||
: ''}"
|
||||
class:message-fit={!bubble_full_width}
|
||||
class:panel-full-width={true}
|
||||
class:message-markdown-disabled={!render_markdown}
|
||||
style:user-select="text"
|
||||
class:selectable
|
||||
style:text-align={rtl ? "right" : "left"}
|
||||
on:click={() => handle_select(i, j, message)}
|
||||
on:keydown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
handle_select(i, j, message);
|
||||
}
|
||||
}}
|
||||
dir={rtl ? "rtl" : "ltr"}
|
||||
aria-label={(j == 0 ? "user" : "bot") +
|
||||
"'s message: " +
|
||||
(typeof message === "string"
|
||||
? message
|
||||
: "file" in message &&
|
||||
message.file !== undefined &&
|
||||
!Array.isArray(message.file)
|
||||
? `a file of type ${message.file?.mime_type}, ${
|
||||
message.file?.alt_text ??
|
||||
message.file?.orig_name ??
|
||||
""
|
||||
}`
|
||||
: "")}
|
||||
style:text-align={rtl && j == 0 ? "left" : "right"}
|
||||
class:component={typeof message === "object" &&
|
||||
message !== null &&
|
||||
"component" in message}
|
||||
class:html={typeof message === "object" &&
|
||||
message !== null &&
|
||||
"component" in message &&
|
||||
message.component === "html"}
|
||||
>
|
||||
{#if message.type === "text"}
|
||||
<Markdown
|
||||
message={message.value}
|
||||
{latex_delimiters}
|
||||
{sanitize_html}
|
||||
{render_markdown}
|
||||
{line_breaks}
|
||||
on:load={scroll}
|
||||
/>
|
||||
{:else if message.type === "component" && message.component in _components}
|
||||
{#if message.component === "gallery"}
|
||||
<svelte:component
|
||||
this={_components[message.component]}
|
||||
value={message.value}
|
||||
show_label={false}
|
||||
{i18n}
|
||||
label=""
|
||||
{_fetch}
|
||||
preview={true}
|
||||
interactive={true}
|
||||
<button
|
||||
data-testid={j == 0 ? "user" : "bot"}
|
||||
class:latest={i === value.length - 1}
|
||||
class:message-markdown-disabled={!render_markdown}
|
||||
style:user-select="text"
|
||||
class:selectable
|
||||
style:text-align={rtl ? "right" : "left"}
|
||||
on:click={() => handle_select(i, j, message)}
|
||||
on:keydown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
handle_select(i, j, message);
|
||||
}
|
||||
}}
|
||||
dir={rtl ? "rtl" : "ltr"}
|
||||
aria-label={(j == 0 ? "user" : "bot") +
|
||||
"'s message: " +
|
||||
(typeof message === "string"
|
||||
? message
|
||||
: "file" in message &&
|
||||
message.file !== undefined &&
|
||||
!Array.isArray(message.file)
|
||||
? `a file of type ${message.file?.mime_type}, ${
|
||||
message.file?.alt_text ??
|
||||
message.file?.orig_name ??
|
||||
""
|
||||
}`
|
||||
: "")}
|
||||
>
|
||||
{#if message.type === "text"}
|
||||
<Markdown
|
||||
message={message.value}
|
||||
{latex_delimiters}
|
||||
{sanitize_html}
|
||||
{render_markdown}
|
||||
{line_breaks}
|
||||
on:load={scroll}
|
||||
/>
|
||||
{:else if message.component === "plot"}
|
||||
<svelte:component
|
||||
this={_components[message.component]}
|
||||
value={message.value}
|
||||
{:else if message.type === "component" && message.component in _components}
|
||||
<Component
|
||||
{target}
|
||||
{theme_mode}
|
||||
bokeh_version={message.props.bokeh_version}
|
||||
caption=""
|
||||
show_actions_button={true}
|
||||
/>
|
||||
{:else if message.component === "audio"}
|
||||
<svelte:component
|
||||
this={_components[message.component]}
|
||||
props={message.props}
|
||||
type={message.component}
|
||||
components={_components}
|
||||
value={message.value}
|
||||
show_label={false}
|
||||
show_share_button={true}
|
||||
{i18n}
|
||||
label=""
|
||||
waveform_settings={{}}
|
||||
waveform_options={{}}
|
||||
/>
|
||||
{:else if message.component === "video"}
|
||||
<svelte:component
|
||||
this={_components[message.component]}
|
||||
autoplay={true}
|
||||
value={message.value.video || message.value}
|
||||
show_label={false}
|
||||
show_share_button={true}
|
||||
{i18n}
|
||||
{upload}
|
||||
{_fetch}
|
||||
on:load={scroll}
|
||||
/>
|
||||
{:else if message.type === "component" && message.component === "file"}
|
||||
<a
|
||||
data-testid="chatbot-file"
|
||||
class="file-pil"
|
||||
href={message.value.url}
|
||||
target="_blank"
|
||||
download={window.__is_colab__
|
||||
? null
|
||||
: message.value?.orig_name ||
|
||||
message.value?.path.split("/").pop() ||
|
||||
"file"}
|
||||
>
|
||||
<track kind="captions" />
|
||||
</svelte:component>
|
||||
{:else if message.component === "image"}
|
||||
<svelte:component
|
||||
this={_components[message.component]}
|
||||
value={message.value}
|
||||
show_label={false}
|
||||
label="chatbot-image"
|
||||
show_share_button={true}
|
||||
{i18n}
|
||||
/>
|
||||
{:else if message.component === "html"}
|
||||
<svelte:component
|
||||
this={_components[message.component]}
|
||||
value={message.value}
|
||||
show_label={false}
|
||||
label="chatbot-image"
|
||||
show_share_button={true}
|
||||
{i18n}
|
||||
gradio={{ dispatch: () => {} }}
|
||||
/>
|
||||
{message.value?.orig_name ||
|
||||
message.value?.path.split("/").pop() ||
|
||||
"file"}
|
||||
</a>
|
||||
{/if}
|
||||
{:else if message.type === "component" && message.component === "file"}
|
||||
<a
|
||||
data-testid="chatbot-file"
|
||||
class="file-pil"
|
||||
href={message.value.url}
|
||||
target="_blank"
|
||||
download={window.__is_colab__
|
||||
? null
|
||||
: message.value?.orig_name || message.value?.path}
|
||||
>
|
||||
{message.value?.orig_name || message.value?.path}
|
||||
</a>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
{#if (likeable && j !== 0) || (show_copy_button && message && typeof message === "string")}
|
||||
<div
|
||||
class="message-buttons-{j == 0
|
||||
? 'user'
|
||||
: 'bot'} message-buttons-{layout} {avatar_images[j] !==
|
||||
null && 'with-avatar'}"
|
||||
class:message-buttons-fit={layout === "bubble" &&
|
||||
!bubble_full_width}
|
||||
class:bubble-buttons-user={layout === "bubble"}
|
||||
>
|
||||
{#if likeable && j == 1}
|
||||
<LikeDislike
|
||||
handle_action={(selected) =>
|
||||
handle_like(i, j, message, selected)}
|
||||
/>
|
||||
{/if}
|
||||
{#if show_copy_button && message && typeof message === "string"}
|
||||
<Copy value={message} />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
<LikeButtons
|
||||
show={(likeable && j === 1) ||
|
||||
(show_copy_button &&
|
||||
message &&
|
||||
typeof message === "string")}
|
||||
handle_action={(selected) =>
|
||||
handle_like(i, j, message, selected)}
|
||||
{likeable}
|
||||
{show_copy_button}
|
||||
{message}
|
||||
position={j === 0 ? "right" : "left"}
|
||||
avatar={avatar_images[j]}
|
||||
show_download={true}
|
||||
{layout}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
@ -425,40 +378,35 @@
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.bubble-wrap {
|
||||
padding: var(--block-padding);
|
||||
.panel-wrap {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.panel-wrap {
|
||||
.flex-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bubble-wrap {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
background: var(--background-fill-secondary);
|
||||
height: 100%;
|
||||
padding-top: var(--spacing-xxl);
|
||||
}
|
||||
|
||||
.message-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--spacing-xxl);
|
||||
}
|
||||
|
||||
.bubble-gap {
|
||||
gap: calc(var(--spacing-xxl) + var(--spacing-lg));
|
||||
}
|
||||
|
||||
.message-wrap
|
||||
> div
|
||||
:not(.avatar-container)
|
||||
div
|
||||
:not(.image-button)
|
||||
:global(img) {
|
||||
border-radius: 13px;
|
||||
margin: var(--size-2);
|
||||
width: 400px;
|
||||
max-width: 30vw;
|
||||
max-height: auto;
|
||||
}
|
||||
|
||||
.message-wrap > div :global(p:not(:first-child)) {
|
||||
margin-top: var(--spacing-xxl);
|
||||
}
|
||||
@ -467,22 +415,33 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: flex-end;
|
||||
background: var(--background-fill-secondary);
|
||||
|
||||
width: calc(100% - var(--spacing-xxl));
|
||||
color: var(--body-text-color);
|
||||
font-size: var(--chatbot-body-text-size);
|
||||
overflow-wrap: break-word;
|
||||
padding-right: calc(var(--spacing-xxl) + var(--spacing-md));
|
||||
padding: calc(var(--spacing-xxl) + var(--spacing-sm));
|
||||
}
|
||||
|
||||
.message :global(.prose) {
|
||||
font-size: var(--chatbot-body-text-size);
|
||||
}
|
||||
|
||||
.message-bubble-border {
|
||||
border-width: 1px;
|
||||
border-radius: var(--radius-xxl);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.bubble .user {
|
||||
border-width: 1px;
|
||||
border-radius: var(--radius-xl);
|
||||
align-self: flex-start;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
box-shadow: var(--shadow-drop-lg);
|
||||
}
|
||||
|
||||
.user {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.message-fit {
|
||||
@ -490,55 +449,85 @@
|
||||
}
|
||||
|
||||
.panel-full-width {
|
||||
padding: calc(var(--spacing-xxl) * 2);
|
||||
width: 100%;
|
||||
}
|
||||
.message-markdown-disabled {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.panel-full-width {
|
||||
padding: calc(var(--spacing-xxl) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
.bubble .user {
|
||||
align-self: flex-start;
|
||||
border-bottom-right-radius: 0;
|
||||
text-align: right;
|
||||
padding: var(--spacing-sm) var(--spacing-xl);
|
||||
}
|
||||
.bot {
|
||||
border-bottom-left-radius: 0;
|
||||
text-align: left;
|
||||
|
||||
.panel .user :global(*) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Colors */
|
||||
.bot {
|
||||
.bubble .bot {
|
||||
border-color: var(--border-color-primary);
|
||||
background: var(--background-fill-secondary);
|
||||
}
|
||||
|
||||
.user {
|
||||
.bubble .user {
|
||||
border-color: var(--border-color-accent-subdued);
|
||||
background-color: var(--color-accent-soft);
|
||||
}
|
||||
|
||||
.message-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/* flex-direction: column; */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message-row.panel.user-row {
|
||||
background: var(--color-accent-soft);
|
||||
.message-row.user-row {
|
||||
align-self: flex-end;
|
||||
}
|
||||
.message-row.bubble {
|
||||
margin: calc(var(--spacing-xl) * 3);
|
||||
}
|
||||
|
||||
.with_avatar.message-row.panel {
|
||||
padding-left: calc(var(--spacing-xl) * 2) !important;
|
||||
padding-right: calc(var(--spacing-xl) * 2) !important;
|
||||
}
|
||||
|
||||
.with_avatar.message-row.bubble.user-row {
|
||||
margin-right: calc(var(--spacing-xl) * 2) !important;
|
||||
}
|
||||
|
||||
.with_avatar.message-row.bubble.bot-row {
|
||||
margin-left: calc(var(--spacing-xl) * 2) !important;
|
||||
}
|
||||
|
||||
.with_opposite_avatar.message-row.bubble.user-row {
|
||||
margin-left: calc(var(--spacing-xxl) + 35px + var(--spacing-xxl));
|
||||
}
|
||||
|
||||
.message-row.panel {
|
||||
margin: 0;
|
||||
padding: calc(var(--spacing-xl) * 3) calc(var(--spacing-xxl) * 2);
|
||||
}
|
||||
|
||||
.message-row.panel.bot-row {
|
||||
background: var(--background-fill-secondary);
|
||||
}
|
||||
|
||||
.message-row.panel.user-row {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.message-row.bubble.bot-row {
|
||||
align-self: flex-start;
|
||||
background: var(--background-fill-secondary);
|
||||
width: calc(100% - var(--spacing-xl) * 6);
|
||||
}
|
||||
|
||||
.message-row:last-of-type {
|
||||
margin-bottom: var(--spacing-xxl);
|
||||
margin-bottom: calc(var(--spacing-xxl) * 2);
|
||||
}
|
||||
|
||||
.user-row.bubble {
|
||||
@ -554,75 +543,39 @@
|
||||
align-self: flex-start;
|
||||
}
|
||||
.message {
|
||||
width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
align-self: flex-end;
|
||||
align-self: flex-start;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
flex-shrink: 0;
|
||||
bottom: 0;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border-color-primary);
|
||||
}
|
||||
.user-row.bubble > .avatar-container {
|
||||
.user-row > .avatar-container {
|
||||
order: 2;
|
||||
margin-left: 10px;
|
||||
margin-left: var(--spacing-xxl);
|
||||
}
|
||||
.bot-row.bubble > .avatar-container {
|
||||
margin-right: 10px;
|
||||
.bot-row > .avatar-container {
|
||||
margin-right: var(--spacing-xxl);
|
||||
margin-left: 0;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.panel > .avatar-container {
|
||||
margin-left: 25px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.avatar-container :not(.thumbnail-item) :global(img) {
|
||||
.avatar-container:not(.thumbnail-item) :global(img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.message-buttons-user,
|
||||
.message-buttons-bot {
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
height: var(--size-7);
|
||||
align-self: self-end;
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
margin: 2px;
|
||||
padding-left: 5px;
|
||||
z-index: 1;
|
||||
}
|
||||
.message-buttons-bot {
|
||||
left: 10px;
|
||||
}
|
||||
.message-buttons-user {
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.message-buttons-bot.message-buttons-bubble.with-avatar {
|
||||
left: 50px;
|
||||
}
|
||||
.message-buttons-user.message-buttons-bubble.with-avatar {
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
.message-buttons-bubble {
|
||||
border: 1px solid var(--border-color-accent);
|
||||
background: var(--background-fill-secondary);
|
||||
}
|
||||
|
||||
.message-buttons-panel {
|
||||
left: unset;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.share-button {
|
||||
@ -659,7 +612,6 @@
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
border-bottom-left-radius: var(--radius-sm);
|
||||
padding: 5px;
|
||||
padding: var(--spacing-md);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
@ -711,11 +663,9 @@
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
.image-preview :global(img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.image-preview :global(svg) {
|
||||
stroke: white;
|
||||
@ -740,18 +690,49 @@
|
||||
.component {
|
||||
padding: 0;
|
||||
border-radius: var(--radius-md);
|
||||
width: fit-content;
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
border: 1px solid var(--border-color-primary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.component.gallery {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.file-pil {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
display: block;
|
||||
width: fit-content;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--background-fill-secondary);
|
||||
color: var(--body-text-color);
|
||||
text-decoration: none;
|
||||
margin: var(--spacing-md);
|
||||
margin: 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.file {
|
||||
width: auto !important;
|
||||
max-width: fit-content !important;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) or (max-width: 480px) {
|
||||
.component {
|
||||
max-width: calc(100% - var(--spacing-xl) * 3);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.prose.chatbot.md) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.message > button {
|
||||
width: 100%;
|
||||
}
|
||||
.html {
|
||||
padding: 0;
|
||||
border: none;
|
||||
|
||||
86
js/chatbot/shared/Component.svelte
Normal file
86
js/chatbot/shared/Component.svelte
Normal file
@ -0,0 +1,86 @@
|
||||
<script lang="ts">
|
||||
export let type: "gallery" | "plot" | "audio" | "video" | "image" | string;
|
||||
export let components;
|
||||
export let value;
|
||||
export let target;
|
||||
export let theme_mode;
|
||||
export let props;
|
||||
export let i18n;
|
||||
export let upload;
|
||||
export let _fetch;
|
||||
</script>
|
||||
|
||||
{#if type === "gallery"}
|
||||
<svelte:component
|
||||
this={components[type]}
|
||||
{value}
|
||||
show_label={false}
|
||||
{i18n}
|
||||
label=""
|
||||
{_fetch}
|
||||
allow_preview={false}
|
||||
interactive={false}
|
||||
mode="minimal"
|
||||
fixed_height={1}
|
||||
on:load
|
||||
/>
|
||||
{:else if type === "plot"}
|
||||
<svelte:component
|
||||
this={components[type]}
|
||||
{value}
|
||||
{target}
|
||||
{theme_mode}
|
||||
bokeh_version={props.bokeh_version}
|
||||
caption=""
|
||||
show_actions_button={true}
|
||||
on:load
|
||||
/>
|
||||
{:else if type === "audio"}
|
||||
<svelte:component
|
||||
this={components[type]}
|
||||
{value}
|
||||
show_label={false}
|
||||
show_share_button={true}
|
||||
{i18n}
|
||||
label=""
|
||||
waveform_settings={{}}
|
||||
waveform_options={{}}
|
||||
show_download_button={false}
|
||||
on:load
|
||||
/>
|
||||
{:else if type === "video"}
|
||||
<svelte:component
|
||||
this={components[type]}
|
||||
autoplay={true}
|
||||
value={value.video || value}
|
||||
show_label={false}
|
||||
show_share_button={true}
|
||||
{i18n}
|
||||
{upload}
|
||||
show_download_button={false}
|
||||
on:load
|
||||
>
|
||||
<track kind="captions" />
|
||||
</svelte:component>
|
||||
{:else if type === "image"}
|
||||
<svelte:component
|
||||
this={components[type]}
|
||||
{value}
|
||||
show_label={false}
|
||||
label="chatbot-image"
|
||||
show_download_button={false}
|
||||
on:load
|
||||
{i18n}
|
||||
/>
|
||||
{:else if type === "html"}
|
||||
<svelte:component
|
||||
this={components[type]}
|
||||
{value}
|
||||
show_label={false}
|
||||
label="chatbot-image"
|
||||
show_share_button={true}
|
||||
{i18n}
|
||||
gradio={{ dispatch: () => {} }}
|
||||
on:load
|
||||
/>
|
||||
{/if}
|
||||
@ -73,7 +73,7 @@
|
||||
}
|
||||
|
||||
.action {
|
||||
width: 15px;
|
||||
height: 14px;
|
||||
width: var(--size-4);
|
||||
height: var(--size-4);
|
||||
}
|
||||
</style>
|
||||
|
||||
16
js/chatbot/shared/Download.svelte
Normal file
16
js/chatbot/shared/Download.svelte
Normal file
@ -0,0 +1,16 @@
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.27701 8.253C6.24187 8.29143 6.19912 8.32212 6.15147 8.34311C6.10383 8.36411 6.05233 8.37495 6.00026 8.37495C5.94819 8.37495 5.89669 8.36411 5.84905 8.34311C5.8014 8.32212 5.75865 8.29143 5.72351 8.253L3.72351 6.0655C3.65798 5.99185 3.62408 5.89536 3.62916 5.79691C3.63424 5.69846 3.67788 5.60596 3.75064 5.53945C3.8234 5.47293 3.91943 5.43774 4.01794 5.44149C4.11645 5.44525 4.20952 5.48764 4.27701 5.5595L5.62501 7.0345V1.5C5.62501 1.40054 5.66452 1.30516 5.73485 1.23483C5.80517 1.16451 5.90055 1.125 6.00001 1.125C6.09947 1.125 6.19485 1.16451 6.26517 1.23483C6.3355 1.30516 6.37501 1.40054 6.37501 1.5V7.034L7.72351 5.559C7.79068 5.4856 7.88425 5.44189 7.98364 5.43748C8.08304 5.43308 8.18011 5.46833 8.25351 5.5355C8.32691 5.60267 8.37062 5.69624 8.37503 5.79563C8.37943 5.89503 8.34418 5.9921 8.27701 6.0655L6.27701 8.253Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M1.875 7.39258C1.875 7.29312 1.83549 7.19774 1.76517 7.12741C1.69484 7.05709 1.59946 7.01758 1.5 7.01758C1.40054 7.01758 1.30516 7.05709 1.23483 7.12741C1.16451 7.19774 1.125 7.29312 1.125 7.39258V7.42008C1.125 8.10358 1.125 8.65508 1.1835 9.08858C1.2435 9.53858 1.3735 9.91758 1.674 10.2186C1.975 10.5196 2.354 10.6486 2.804 10.7096C3.2375 10.7676 3.789 10.7676 4.4725 10.7676H7.5275C8.211 10.7676 8.7625 10.7676 9.196 10.7096C9.646 10.6486 10.025 10.5196 10.326 10.2186C10.627 9.91758 10.756 9.53858 10.817 9.08858C10.875 8.65508 10.875 8.10358 10.875 7.42008V7.39258C10.875 7.29312 10.8355 7.19774 10.7652 7.12741C10.6948 7.05709 10.5995 7.01758 10.5 7.01758C10.4005 7.01758 10.3052 7.05709 10.2348 7.12741C10.1645 7.19774 10.125 7.29312 10.125 7.39258C10.125 8.11008 10.124 8.61058 10.0735 8.98858C10.024 9.35558 9.9335 9.54958 9.7955 9.68808C9.657 9.82658 9.463 9.91658 9.0955 9.96608C8.718 10.0166 8.2175 10.0176 7.5 10.0176H4.5C3.7825 10.0176 3.2815 10.0166 2.904 9.96608C2.537 9.91658 2.343 9.82608 2.2045 9.68808C2.066 9.54958 1.976 9.35558 1.9265 8.98808C1.876 8.61058 1.875 8.11008 1.875 7.39258Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@ -1,46 +1,79 @@
|
||||
<script lang="ts">
|
||||
import { Like } from "@gradio/icons";
|
||||
import { Dislike } from "@gradio/icons";
|
||||
import ThumbDownActive from "./ThumbDownActive.svelte";
|
||||
import ThumbDownDefault from "./ThumbDownDefault.svelte";
|
||||
import ThumbUpActive from "./ThumbUpActive.svelte";
|
||||
import ThumbUpDefault from "./ThumbUpDefault.svelte";
|
||||
|
||||
export let handle_action: (selected: string | null) => void;
|
||||
export let padded = false;
|
||||
|
||||
let selected: "like" | "dislike" | null = null;
|
||||
</script>
|
||||
|
||||
<button
|
||||
on:click={() => {
|
||||
selected = "like";
|
||||
handle_action(selected);
|
||||
}}
|
||||
aria-label={selected === "like" ? "clicked like" : "like"}
|
||||
>
|
||||
<Like selected={selected === "like"} />
|
||||
</button>
|
||||
|
||||
<button
|
||||
on:click={() => {
|
||||
selected = "dislike";
|
||||
handle_action(selected);
|
||||
}}
|
||||
aria-label={selected === "dislike" ? "clicked dislike" : "dislike"}
|
||||
class:padded
|
||||
class:selected={selected === "dislike"}
|
||||
class="dislike-button"
|
||||
>
|
||||
<Dislike selected={selected === "dislike"} />
|
||||
<span>
|
||||
{#if selected === "dislike"}
|
||||
<ThumbDownActive />
|
||||
{:else}
|
||||
<ThumbDownDefault />
|
||||
{/if}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="like-button"
|
||||
class:padded
|
||||
on:click={() => {
|
||||
selected = "like";
|
||||
handle_action(selected);
|
||||
}}
|
||||
aria-label={selected === "like" ? "clicked like" : "like"}
|
||||
class:selected={selected === "like"}
|
||||
>
|
||||
<span>
|
||||
{#if selected === "like"}
|
||||
<ThumbUpActive />
|
||||
{:else}
|
||||
<ThumbUpDefault />
|
||||
{/if}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
button {
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
color: var(--body-text-color-subdued);
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
margin-right: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 7px !important;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:focus {
|
||||
color: var(--body-text-color);
|
||||
}
|
||||
|
||||
.selected,
|
||||
.selected:focus,
|
||||
.selected:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.like-button {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
</style>
|
||||
|
||||
12
js/chatbot/shared/ThumbDownActive.svelte
Normal file
12
js/chatbot/shared/ThumbDownActive.svelte
Normal file
@ -0,0 +1,12 @@
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.25 6.61523H9.375V1.36523H11.25V6.61523ZM3.375 1.36523H8.625V6.91636L7.48425 8.62748L7.16737 10.8464C7.14108 11.0248 7.05166 11.1879 6.91535 11.3061C6.77904 11.4242 6.60488 11.4896 6.4245 11.4902H6.375C6.07672 11.4899 5.79075 11.3713 5.57983 11.1604C5.36892 10.9495 5.2503 10.6635 5.25 10.3652V8.11523H2.25C1.85233 8.11474 1.47109 7.95654 1.18989 7.67535C0.908691 7.39415 0.750496 7.01291 0.75 6.61523V3.99023C0.750992 3.29435 1.02787 2.62724 1.51994 2.13517C2.01201 1.64311 2.67911 1.36623 3.375 1.36523Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 657 B |
12
js/chatbot/shared/ThumbDownDefault.svelte
Normal file
12
js/chatbot/shared/ThumbDownDefault.svelte
Normal file
@ -0,0 +1,12 @@
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M2.25 8.11523H4.5V10.3652C4.5003 10.6635 4.61892 10.9495 4.82983 11.1604C5.04075 11.3713 5.32672 11.4899 5.625 11.4902H6.42488C6.60519 11.4895 6.77926 11.4241 6.91549 11.3059C7.05172 11.1878 7.14109 11.0248 7.16737 10.8464L7.48425 8.62748L8.82562 6.61523H11.25V1.36523H3.375C2.67911 1.36623 2.01201 1.64311 1.51994 2.13517C1.02787 2.62724 0.750992 3.29435 0.75 3.99023V6.61523C0.750496 7.01291 0.908691 7.39415 1.18989 7.67535C1.47109 7.95654 1.85233 8.11474 2.25 8.11523ZM9 2.11523H10.5V5.86523H9V2.11523ZM1.5 3.99023C1.5006 3.49314 1.69833 3.01657 2.04983 2.66507C2.40133 2.31356 2.8779 2.11583 3.375 2.11523H8.25V6.12661L6.76575 8.35298L6.4245 10.7402H5.625C5.52554 10.7402 5.43016 10.7007 5.35983 10.6304C5.28951 10.5601 5.25 10.4647 5.25 10.3652V7.36523H2.25C2.05118 7.36494 1.86059 7.28582 1.72 7.14524C1.57941 7.00465 1.5003 6.81406 1.5 6.61523V3.99023Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1009 B |
12
js/chatbot/shared/ThumbUpActive.svelte
Normal file
12
js/chatbot/shared/ThumbUpActive.svelte
Normal file
@ -0,0 +1,12 @@
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.75 6.24023H2.625V11.4902H0.75V6.24023ZM8.625 11.4902H3.375V5.93911L4.51575 4.22798L4.83263 2.00911C4.85892 1.83065 4.94834 1.66754 5.08465 1.5494C5.22096 1.43125 5.39512 1.36591 5.5755 1.36523H5.625C5.92328 1.36553 6.20925 1.48415 6.42017 1.69507C6.63108 1.90598 6.7497 2.19196 6.75 2.49023V4.74023H9.75C10.1477 4.74073 10.5289 4.89893 10.8101 5.18012C11.0913 5.46132 11.2495 5.84256 11.25 6.24023V8.86523C11.249 9.56112 10.9721 10.2282 10.4801 10.7203C9.98799 11.2124 9.32089 11.4892 8.625 11.4902Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 651 B |
12
js/chatbot/shared/ThumbUpDefault.svelte
Normal file
12
js/chatbot/shared/ThumbUpDefault.svelte
Normal file
@ -0,0 +1,12 @@
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.75 4.74023H7.5V2.49023C7.4997 2.19196 7.38108 1.90598 7.17017 1.69507C6.95925 1.48415 6.67328 1.36553 6.375 1.36523H5.57512C5.39481 1.366 5.22074 1.43138 5.08451 1.54952C4.94828 1.66766 4.85891 1.83072 4.83262 2.00911L4.51575 4.22798L3.17438 6.24023H0.75V11.4902H8.625C9.32089 11.4892 9.98799 11.2124 10.4801 10.7203C10.9721 10.2282 11.249 9.56112 11.25 8.86523V6.24023C11.2495 5.84256 11.0913 5.46132 10.8101 5.18012C10.5289 4.89893 10.1477 4.74073 9.75 4.74023ZM3 10.7402H1.5V6.99023H3V10.7402ZM10.5 8.86523C10.4994 9.36233 10.3017 9.8389 9.95017 10.1904C9.59867 10.5419 9.1221 10.7396 8.625 10.7402H3.75V6.72886L5.23425 4.50248L5.5755 2.11523H6.375C6.47446 2.11523 6.56984 2.15474 6.64017 2.22507C6.71049 2.2954 6.75 2.39078 6.75 2.49023V5.49023H9.75C9.94882 5.49053 10.1394 5.56965 10.28 5.71023C10.4206 5.85082 10.4997 6.04141 10.5 6.24023V8.86523Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1005 B |
@ -32,6 +32,7 @@
|
||||
export let selected_index: number | null = null;
|
||||
export let interactive: boolean;
|
||||
export let _fetch: typeof fetch;
|
||||
export let mode: "normal" | "minimal" = "normal";
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
change: undefined;
|
||||
@ -205,7 +206,11 @@
|
||||
<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
|
||||
{:else}
|
||||
{#if selected_image && allow_preview}
|
||||
<button on:keydown={on_keydown} class="preview">
|
||||
<button
|
||||
on:keydown={on_keydown}
|
||||
class="preview"
|
||||
class:minimal={mode === "minimal"}
|
||||
>
|
||||
<div class="icon-buttons">
|
||||
{#if show_download_button}
|
||||
<div class="download-button-container">
|
||||
@ -262,7 +267,7 @@
|
||||
bind:this={el[i]}
|
||||
on:click={() => (selected_index = i)}
|
||||
class="thumbnail-item thumbnail-small"
|
||||
class:selected={selected_index === i}
|
||||
class:selected={selected_index === i && mode !== "minimal"}
|
||||
aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
|
||||
>
|
||||
<Image
|
||||
@ -278,7 +283,11 @@
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<div class="grid-wrap" class:fixed-height={!height || height == "auto"}>
|
||||
<div
|
||||
class="grid-wrap"
|
||||
class:minimal={mode === "minimal"}
|
||||
class:fixed-height={mode !== "minimal" && (!height || height == "auto")}
|
||||
>
|
||||
<div
|
||||
class="grid-container"
|
||||
style="--grid-cols:{columns}; --grid-rows:{rows}; --object-fit: {object_fit}; height: {height};"
|
||||
@ -342,6 +351,11 @@
|
||||
height: var(--size-full);
|
||||
}
|
||||
|
||||
.preview.minimal {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.preview::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -382,6 +396,10 @@
|
||||
height: var(--size-full);
|
||||
}
|
||||
|
||||
.preview.minimal :global(img.with-caption) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.caption {
|
||||
padding: var(--size-2) var(--size-3);
|
||||
overflow: hidden;
|
||||
@ -409,7 +427,7 @@
|
||||
--ring-color: transparent;
|
||||
position: relative;
|
||||
box-shadow:
|
||||
0 0 0 2px var(--ring-color),
|
||||
inset 0 0 0 1px var(--ring-color),
|
||||
var(--shadow-drop);
|
||||
border: 1px solid var(--border-color-primary);
|
||||
border-radius: var(--button-small-radius);
|
||||
@ -422,11 +440,13 @@
|
||||
|
||||
.thumbnail-item:hover {
|
||||
--ring-color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.thumbnail-item.selected {
|
||||
--ring-color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.thumbnail-small {
|
||||
@ -511,4 +531,8 @@
|
||||
.icon-buttons .download-button-container {
|
||||
margin: var(--size-1) 0;
|
||||
}
|
||||
|
||||
.grid-wrap.minimal {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let selected: boolean;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill={selected ? "currentColor" : "none"}
|
||||
stroke-width="1.5"
|
||||
color="currentColor"
|
||||
><path
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
d="M16.472 3.5H4.1a.6.6 0 0 0-.6.6v9.8a.6.6 0 0 0 .6.6h2.768a2 2 0 0 1 1.715.971l2.71 4.517a1.631 1.631 0 0 0 2.961-1.308l-1.022-3.408a.6.6 0 0 1 .574-.772h4.575a2 2 0 0 0 1.93-2.526l-1.91-7A2 2 0 0 0 16.473 3.5Z"
|
||||
/><path
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M7 14.5v-11"
|
||||
/></svg
|
||||
>
|
||||
@ -1,23 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let selected: boolean;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill={selected ? "currentColor" : "none"}
|
||||
stroke-width="1.5"
|
||||
color="currentColor"
|
||||
><path
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
d="M16.472 20H4.1a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h2.768a2 2 0 0 0 1.715-.971l2.71-4.517a1.631 1.631 0 0 1 2.961 1.308l-1.022 3.408a.6.6 0 0 0 .574.772h4.575a2 2 0 0 1 1.93 2.526l-1.91 7A2 2 0 0 1 16.473 20Z"
|
||||
/><path
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M7 20V9"
|
||||
/></svg
|
||||
>
|
||||
@ -12,7 +12,6 @@ export { default as Color } from "./Color.svelte";
|
||||
export { default as Community } from "./Community.svelte";
|
||||
export { default as Copy } from "./Copy.svelte";
|
||||
export { default as Crop } from "./Crop.svelte";
|
||||
export { default as Dislike } from "./Dislike.svelte";
|
||||
export { default as Download } from "./Download.svelte";
|
||||
export { default as DropdownArrow } from "./DropdownArrow.svelte";
|
||||
export { default as Edit } from "./Edit.svelte";
|
||||
@ -26,7 +25,6 @@ export { default as Image } from "./Image.svelte";
|
||||
export { default as ImagePaste } from "./ImagePaste.svelte";
|
||||
export { default as JSON } from "./JSON.svelte";
|
||||
export { default as Layers } from "./Layers.svelte";
|
||||
export { default as Like } from "./Like.svelte";
|
||||
export { default as LineChart } from "./LineChart.svelte";
|
||||
export { default as Maximise } from "./Maximise.svelte";
|
||||
export { default as Microphone } from "./Microphone.svelte";
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLImgAttributes } from "svelte/elements";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
||||
const dispatch = createEventDispatcher<{ load?: void }>();
|
||||
interface Props extends HTMLImgAttributes {
|
||||
"data-testid"?: string;
|
||||
}
|
||||
@ -34,7 +37,7 @@
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<img src={resolved_src} {...$$restProps} />
|
||||
<img src={resolved_src} {...$$restProps} on:load={() => dispatch("load")} />
|
||||
|
||||
<style>
|
||||
img {
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
</div>
|
||||
<button on:click={handle_click}>
|
||||
<div class:selectable class="image-container">
|
||||
<Image src={value.url} alt="" loading="lazy" />
|
||||
<Image src={value.url} alt="" loading="lazy" on:load />
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
@ -45,6 +45,7 @@
|
||||
{caption}
|
||||
{bokeh_version}
|
||||
{show_actions_button}
|
||||
on:load
|
||||
/>
|
||||
{:else}
|
||||
<Empty unpadded_box={true} size="large"><PlotIcon /></Empty>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<script lang="ts">
|
||||
//@ts-nocheck
|
||||
import { onDestroy } from "svelte";
|
||||
import { onDestroy, createEventDispatcher } from "svelte";
|
||||
|
||||
export let value;
|
||||
export let bokeh_version: string | null;
|
||||
const div_id = `bokehDiv-${Math.random().toString(5).substring(2)}`;
|
||||
|
||||
const dispatch = createEventDispatcher<{ load: undefined }>();
|
||||
$: plot = value?.plot;
|
||||
|
||||
function embed_bokeh(_plot: Record<string, any>): void {
|
||||
async function embed_bokeh(_plot: Record<string, any>): void {
|
||||
if (document) {
|
||||
if (document.getElementById(div_id)) {
|
||||
document.getElementById(div_id).innerHTML = "";
|
||||
@ -17,11 +17,15 @@
|
||||
if (window.Bokeh) {
|
||||
load_bokeh();
|
||||
let plotObj = JSON.parse(_plot);
|
||||
window.Bokeh.embed.embed_item(plotObj, div_id);
|
||||
const y = await window.Bokeh.embed.embed_item(plotObj, div_id);
|
||||
y._roots.forEach(async (p) => {
|
||||
await p.ready;
|
||||
dispatch("load");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$: embed_bokeh(plot);
|
||||
$: loaded && embed_bokeh(plot);
|
||||
|
||||
const main_src = `https://cdn.bokeh.org/bokeh/release/bokeh-${bokeh_version}.min.js`;
|
||||
|
||||
@ -32,14 +36,27 @@
|
||||
`https://cdn.pydata.org/bokeh/release/bokeh-api-${bokeh_version}.min.js`
|
||||
];
|
||||
|
||||
function load_plugins(): HTMLScriptElement[] {
|
||||
return plugins_src.map((src, i) => {
|
||||
const script = document.createElement("script");
|
||||
script.src = src;
|
||||
document.head.appendChild(script);
|
||||
let loaded = false;
|
||||
async function load_plugins(): HTMLScriptElement[] {
|
||||
await Promise.all(
|
||||
plugins_src.map((src, i) => {
|
||||
return new Promise((resolve) => {
|
||||
const script = document.createElement("script");
|
||||
script.onload = resolve;
|
||||
script.src = src;
|
||||
document.head.appendChild(script);
|
||||
return script;
|
||||
});
|
||||
})
|
||||
);
|
||||
|
||||
return script;
|
||||
});
|
||||
loaded = true;
|
||||
}
|
||||
|
||||
let plugin_scripts = [];
|
||||
|
||||
function handle_bokeh_loaded(): void {
|
||||
plugin_scripts = load_plugins();
|
||||
}
|
||||
|
||||
function load_bokeh(): HTMLScriptElement {
|
||||
@ -51,18 +68,14 @@
|
||||
);
|
||||
if (!is_bokeh_script_present) {
|
||||
document.head.appendChild(script);
|
||||
} else {
|
||||
handle_bokeh_loaded();
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
||||
const main_script = bokeh_version ? load_bokeh() : null;
|
||||
|
||||
let plugin_scripts = [];
|
||||
|
||||
function handle_bokeh_loaded(): void {
|
||||
plugin_scripts = load_plugins();
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
if (main_script in document.children) {
|
||||
document.removeChild(main_script);
|
||||
|
||||
@ -5,7 +5,11 @@
|
||||
</script>
|
||||
|
||||
<div data-testid={"matplotlib"} class="matplotlib layout">
|
||||
<img src={plot} alt={`${value.chart} plot visualising provided data`} />
|
||||
<img
|
||||
src={plot}
|
||||
alt={`${value.chart} plot visualising provided data`}
|
||||
on:load
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
//@ts-nocheck
|
||||
import Plotly from "plotly.js-dist-min";
|
||||
import { afterUpdate } from "svelte";
|
||||
import { afterUpdate, createEventDispatcher } from "svelte";
|
||||
|
||||
export let value;
|
||||
export let target;
|
||||
@ -11,6 +11,8 @@
|
||||
let plot_div;
|
||||
let plotly_global_style;
|
||||
|
||||
const dispatch = createEventDispatcher<{ load: undefined }>();
|
||||
|
||||
function load_plotly_css(): void {
|
||||
if (!plotly_global_style) {
|
||||
plotly_global_style = document.getElementById("plotly.js-style-global");
|
||||
@ -22,13 +24,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
afterUpdate(() => {
|
||||
afterUpdate(async () => {
|
||||
load_plotly_css();
|
||||
|
||||
let plotObj = JSON.parse(plot);
|
||||
|
||||
// the docs aren't very good but this works
|
||||
plotObj.config = plotObj.config || {};
|
||||
plotObj.config.responsive = true;
|
||||
plotObj.responsive = true;
|
||||
plotObj.layout.autosize = true;
|
||||
|
||||
plotObj.layout.title
|
||||
? (plotObj.layout.margin = { autoexpand: true })
|
||||
: (plotObj.layout.margin = { l: 0, r: 0, b: 0, t: 0 });
|
||||
Plotly.react(plot_div, plotObj);
|
||||
|
||||
Plotly.react(plot_div, plotObj.data, plotObj.layout, plotObj.config);
|
||||
Plotly.Plots.resize(plot_div);
|
||||
|
||||
plot_div.on("plotly_afterplot", () => {
|
||||
dispatch("load");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -15,7 +15,6 @@
|
||||
Color,
|
||||
Community,
|
||||
Copy,
|
||||
Dislike,
|
||||
Download,
|
||||
DropdownArrow,
|
||||
Edit,
|
||||
@ -24,7 +23,6 @@
|
||||
Info,
|
||||
Image,
|
||||
JSON,
|
||||
Like,
|
||||
LineChart,
|
||||
Maximise,
|
||||
Music,
|
||||
@ -56,7 +54,6 @@
|
||||
{ name: "Color", value: Color },
|
||||
{ name: "Community", value: Community },
|
||||
{ name: "Copy", value: Copy },
|
||||
{ name: "Dislike", value: Dislike },
|
||||
{ name: "Download", value: Download },
|
||||
{ name: "DropdownArrow", value: DropdownArrow },
|
||||
{ name: "Edit", value: Edit },
|
||||
@ -65,7 +62,6 @@
|
||||
{ name: "Info", value: Info },
|
||||
{ name: "Image", value: Image },
|
||||
{ name: "JSON", value: JSON },
|
||||
{ name: "Like", value: Like },
|
||||
{ name: "LineChart", value: LineChart },
|
||||
{ name: "Maximise", value: Maximise },
|
||||
{ name: "Music", value: Music },
|
||||
|
||||
@ -106,6 +106,7 @@
|
||||
bind:node={video}
|
||||
data-testid={`${label}-player`}
|
||||
{processingVideo}
|
||||
on:load
|
||||
>
|
||||
<track kind="captions" src={subtitle} default />
|
||||
</Video>
|
||||
|
||||
@ -75,6 +75,7 @@ Then, even when `controls` is false, the compiled DOM would be `<video controls=
|
||||
on:mouseout={dispatch.bind(null, "mouseout")}
|
||||
on:focus={dispatch.bind(null, "focus")}
|
||||
on:blur={dispatch.bind(null, "blur")}
|
||||
on:load
|
||||
bind:currentTime
|
||||
bind:duration
|
||||
bind:paused
|
||||
|
||||
@ -62,6 +62,7 @@
|
||||
on:pause
|
||||
on:stop
|
||||
on:end
|
||||
on:load
|
||||
mirror={false}
|
||||
{label}
|
||||
interactive={false}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { getWorkerProxyContext } from "./context";
|
||||
import { is_self_host } from "../network/host";
|
||||
import { getHeaderValue } from "../src/http";
|
||||
import type { WorkerProxy } from "../dist";
|
||||
|
||||
type MediaSrc = string | undefined | null;
|
||||
|
||||
@ -22,12 +23,22 @@ export function should_proxy_wasm_src(src: MediaSrc): boolean {
|
||||
return true;
|
||||
}
|
||||
|
||||
let maybeWorkerProxy: WorkerProxy | undefined;
|
||||
|
||||
export async function resolve_wasm_src(src: MediaSrc): Promise<MediaSrc> {
|
||||
if (src == null || !should_proxy_wasm_src(src)) {
|
||||
return src;
|
||||
}
|
||||
|
||||
const maybeWorkerProxy = getWorkerProxyContext();
|
||||
if (maybeWorkerProxy == null) {
|
||||
try {
|
||||
maybeWorkerProxy = getWorkerProxyContext();
|
||||
} catch (e) {
|
||||
// We are not in the Wasm env. Just use the src as is.
|
||||
return src;
|
||||
}
|
||||
}
|
||||
|
||||
if (maybeWorkerProxy == null) {
|
||||
// We are not in the Wasm env. Just use the src as is.
|
||||
return src;
|
||||
|
||||
@ -804,6 +804,9 @@ importers:
|
||||
'@gradio/utils':
|
||||
specifier: workspace:^
|
||||
version: link:../utils
|
||||
'@gradio/wasm':
|
||||
specifier: workspace:^
|
||||
version: link:../wasm
|
||||
'@types/dompurify':
|
||||
specifier: ^3.0.2
|
||||
version: 3.0.2
|
||||
|
||||
Loading…
Reference in New Issue
Block a user