@gradio/image 0.14.0 → 0.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +38 -0
- package/Image.stories.svelte +43 -15
- package/Image.test.ts +2 -3
- package/Index.svelte +32 -1
- package/dist/Example.svelte +46 -0
- package/dist/Example.svelte.d.ts +19 -0
- package/dist/Index.svelte +185 -0
- package/dist/Index.svelte.d.ts +158 -0
- package/dist/shared/ClearImage.svelte +28 -0
- package/dist/shared/ClearImage.svelte.d.ts +18 -0
- package/dist/shared/Image.svelte +26 -0
- package/dist/shared/Image.svelte.d.ts +247 -0
- package/dist/shared/ImagePreview.svelte +155 -0
- package/dist/shared/ImagePreview.svelte.d.ts +32 -0
- package/dist/shared/ImageUploader.svelte +181 -0
- package/dist/shared/ImageUploader.svelte.d.ts +42 -0
- package/dist/shared/Webcam.svelte +371 -0
- package/dist/shared/Webcam.svelte.d.ts +33 -0
- package/dist/shared/WebcamPermissions.svelte +42 -0
- package/dist/shared/WebcamPermissions.svelte.d.ts +18 -0
- package/dist/shared/index.d.ts +2 -0
- package/dist/shared/index.js +2 -0
- package/dist/shared/stream_utils.d.ts +5 -0
- package/dist/shared/stream_utils.js +31 -0
- package/dist/shared/utils.d.ts +1 -0
- package/dist/shared/utils.js +28 -0
- package/package.json +38 -14
- package/shared/ImagePreview.svelte +17 -6
- package/shared/ImageUploader.svelte +12 -5
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
{/if}
|
|
100
100
|
</div>
|
|
101
101
|
<button on:click={handle_click}>
|
|
102
|
-
<div class:selectable>
|
|
102
|
+
<div class:selectable class="image-frame">
|
|
103
103
|
<Image src={value.url} alt="" loading="lazy" on:load />
|
|
104
104
|
</div>
|
|
105
105
|
</button>
|
|
@@ -111,12 +111,10 @@
|
|
|
111
111
|
height: 100%;
|
|
112
112
|
position: relative;
|
|
113
113
|
}
|
|
114
|
-
|
|
115
|
-
button {
|
|
114
|
+
|
|
115
|
+
.image-container button {
|
|
116
116
|
width: var(--size-full);
|
|
117
117
|
height: var(--size-full);
|
|
118
|
-
object-fit: contain;
|
|
119
|
-
display: block;
|
|
120
118
|
border-radius: var(--radius-lg);
|
|
121
119
|
|
|
122
120
|
display: flex;
|
|
@@ -124,6 +122,19 @@
|
|
|
124
122
|
justify-content: center;
|
|
125
123
|
}
|
|
126
124
|
|
|
125
|
+
.image-frame {
|
|
126
|
+
width: auto;
|
|
127
|
+
height: 100%;
|
|
128
|
+
display: flex;
|
|
129
|
+
align-items: center;
|
|
130
|
+
justify-content: center;
|
|
131
|
+
}
|
|
132
|
+
.image-frame :global(img) {
|
|
133
|
+
width: var(--size-full);
|
|
134
|
+
height: var(--size-full);
|
|
135
|
+
object-fit: scale-down;
|
|
136
|
+
}
|
|
137
|
+
|
|
127
138
|
.selectable {
|
|
128
139
|
cursor: crosshair;
|
|
129
140
|
}
|
|
@@ -152,6 +163,6 @@
|
|
|
152
163
|
:global(.image-container:fullscreen img) {
|
|
153
164
|
max-width: 90vw;
|
|
154
165
|
max-height: 90vh;
|
|
155
|
-
object-fit:
|
|
166
|
+
object-fit: scale-down;
|
|
156
167
|
}
|
|
157
168
|
</style>
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
select: SelectData;
|
|
71
71
|
}>();
|
|
72
72
|
|
|
73
|
-
let dragging = false;
|
|
73
|
+
export let dragging = false;
|
|
74
74
|
|
|
75
75
|
$: dispatch("drag", dragging);
|
|
76
76
|
|
|
@@ -109,7 +109,11 @@
|
|
|
109
109
|
}}
|
|
110
110
|
/>
|
|
111
111
|
{/if}
|
|
112
|
-
<div
|
|
112
|
+
<div
|
|
113
|
+
class="upload-container"
|
|
114
|
+
class:reduced-height={sources.length > 1}
|
|
115
|
+
style:width={value ? "auto" : "100%"}
|
|
116
|
+
>
|
|
113
117
|
<Upload
|
|
114
118
|
hidden={value !== null || active_source === "webcam"}
|
|
115
119
|
bind:this={upload_input}
|
|
@@ -120,7 +124,7 @@
|
|
|
120
124
|
on:error
|
|
121
125
|
{root}
|
|
122
126
|
{max_file_size}
|
|
123
|
-
disable_click={!sources.includes("upload")}
|
|
127
|
+
disable_click={!sources.includes("upload") || value !== null}
|
|
124
128
|
{upload}
|
|
125
129
|
{stream_handler}
|
|
126
130
|
>
|
|
@@ -165,7 +169,7 @@
|
|
|
165
169
|
.image-frame :global(img) {
|
|
166
170
|
width: var(--size-full);
|
|
167
171
|
height: var(--size-full);
|
|
168
|
-
object-fit:
|
|
172
|
+
object-fit: scale-down;
|
|
169
173
|
}
|
|
170
174
|
|
|
171
175
|
.image-frame {
|
|
@@ -175,10 +179,13 @@
|
|
|
175
179
|
}
|
|
176
180
|
|
|
177
181
|
.upload-container {
|
|
182
|
+
display: flex;
|
|
183
|
+
align-items: center;
|
|
184
|
+
justify-content: center;
|
|
185
|
+
|
|
178
186
|
height: 100%;
|
|
179
187
|
flex-shrink: 1;
|
|
180
188
|
max-height: 100%;
|
|
181
|
-
width: 100%;
|
|
182
189
|
}
|
|
183
190
|
|
|
184
191
|
.reduced-height {
|