Capture screen like similar to Claude #1604
Open
+141
−60
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
nsarrazin
approved these changes
Jan 6, 2025
There was a problem hiding this comment.
Hi @harisyammnv I merged the latest changes to the tool UI to your branch and updated a few things to make it work there.
The icon now shows whenever we support uploading images in the file upload MIME types. So tools that accept images and multimodal models are both supported.
cc @gary149 for review, if we want to add this in prod or not
gary149
reviewed
Jan 7, 2025
There was a problem hiding this comment.
Capitalized: IconScreenshot.svelte
gary149
reviewed
Jan 7, 2025
Comment on lines
+5
to
+19
| <svg | ||
| class={classNames} | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| aria-hidden="true" | ||
| focusable="false" | ||
| role="img" | ||
| width="1em" | ||
| height="1em" | ||
| fill="currentColor" | ||
| viewBox="0 0 24 24" | ||
| > | ||
| <path | ||
| d="M15 16h4v-4h-1.5v2.5H15zM5 10h1.5V7.5H9V6H5zm3 11v-2H4q-.825 0-1.412-.587T2 17V5q0-.825.588-1.412T4 3h16q.825 0 1.413.588T22 5v12q0 .825-.587 1.413T20 19h-4v2zm-4-4h16V5H4zm0 0V5z" | ||
| /> | ||
| </svg> |
There was a problem hiding this comment.
Custom icon that matches the others better:
Suggested change
| <svg | |
| class={classNames} | |
| xmlns="http://www.w3.org/2000/svg" | |
| aria-hidden="true" | |
| focusable="false" | |
| role="img" | |
| width="1em" | |
| height="1em" | |
| fill="currentColor" | |
| viewBox="0 0 24 24" | |
| > | |
| <path | |
| d="M15 16h4v-4h-1.5v2.5H15zM5 10h1.5V7.5H9V6H5zm3 11v-2H4q-.825 0-1.412-.587T2 17V5q0-.825.588-1.412T4 3h16q.825 0 1.413.588T22 5v12q0 .825-.587 1.413T20 19h-4v2zm-4-4h16V5H4zm0 0V5z" | |
| /> | |
| </svg> | |
| <svg | |
| class={classNames} | |
| xmlns="http://www.w3.org/2000/svg" | |
| aria-hidden="true" | |
| focusable="false" | |
| role="img" | |
| width="1em" | |
| height="1em" | |
| fill="currentColor" | |
| viewBox="0 0 32 32" | |
| ><path | |
| fill-rule="evenodd" | |
| clip-rule="evenodd" | |
| d="M5.98 6.01h20.04v16.1H5.98V6.02Zm-2.1 0c0-1.16.94-2.1 2.1-2.1h20.04c1.16 0 2.1.94 2.1 2.1v16.1a2.1 2.1 0 0 1-2.1 2.11H5.98a2.1 2.1 0 0 1-2.1-2.1V6.02Zm5.7 1.65a2.1 2.1 0 0 0-2.1 2.1v2.61a1.05 1.05 0 0 0 2.1 0v-2.6h2.96a1.05 1.05 0 1 0 0-2.11H9.58ZM24.41 18.4a2.1 2.1 0 0 1-2.1 2.1h-2.95a1.05 1.05 0 1 1 0-2.1h2.95v-2.61a1.05 1.05 0 0 1 2.1 0v2.6ZM10.1 25.9a1.05 1.05 0 1 0 0 2.1H22.3a1.05 1.05 0 1 0 0-2.1H10.1Z" | |
| /> | |
| </svg> |
gary149
reviewed
Jan 7, 2025
| @@ -250,6 +252,27 @@ | |||
| </label> | |||
| </HoverTooltip> | |||
| </form> | |||
| {#if mimeTypes.includes("image/*")} | |||
| <HoverTooltip label="Capture screenshot" position="top"> | |||
There was a problem hiding this comment.
positioning could be better:
gary149
reviewed
Jan 7, 2025
Comment on lines
+417
to
+418
| <div class="flex w-full items-center gap-2"> | ||
| <form |
There was a problem hiding this comment.
didn't test extensively but I would prefer not changing the elements wrapping here.
gary149
reviewed
Jan 7, 2025
| console.error("Error capturing screenshot:", error); | ||
| throw error; | ||
| } | ||
| } |
There was a problem hiding this comment.
Might be safer to stop all tracks in a finally block
} finally {
if (stream) {
stream.getTracks().forEach((track) => track.stop());
}
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I tried to get a simpler version of Screen capture similar to the one in Claude here
@nsarrazin : your comments would be appreciated here