Val Town Code SearchReturn to Val Town

5First conversation:
6
7![FirstConversation.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/78c48b8b-8a1b-4caf-ef23-2ad78be3a100/public)
8
9What GPT sent do the API:
20Separate conversation somewhere in the future:
21
22![Second Conversation.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/bae24fd1-cec7-49b1-ac16-74b9f5aa4c00/public)
23
24# Setup

1# uploadImage
2uploads an image to val.town just like when you paste an image into a readme

1/**
2 * upload an image to val.town
3 * @param {Blob} image - image must have image/jpeg, image/png, image/webp, image/gif or image/svg+xml content-type
4 * @returns {string}   - uploaded image url
5 */
6export async function uploadImage(image: Blob): Promise<string> {
7  const fd = new FormData();
8  fd.append(
9    "file",
10    image,
11  );
12  const data = await (await fetch(await getUploadURL(), {
24}
25async function getUploadURL(): Promise<string> {
26  const data = await (await fetch("https://www.val.town/api/trpc/generateImageUploadUrl", {
27    "headers": {
28      "content-type": "application/json",

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7## Installation

222          headers: {
223            "User-Agent": userAgent,
224            "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
225            "Accept-Language": "en-US,en;q=0.5",
226            "Referer": "https://www.google.com/",

21
22- This is a temporary workaround until the Presentation API is implemented as part of Djehuty
23- Only images are currently supported (not video/audio)
24- The val needs to do some API requests before producing the manifest and doesn't cache responses
25
26Credits:
27
28- Image API implementation by Roel Janssen of 4TU.ResearchData. The source code can be found [here](https://github.com/4TUResearchData/djehuty)
29- [IIIF Builder](https://github.com/IIIF-Commons/iiif-builder) by Stephen Fraser

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7## Installation

3This is a lightweight SQLite Admin interface to view and debug your SQLite data.
4
5![Screenshot 2023-12-08 at 13.35.04.gif](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/ee9a9237-96a0-4276-60b5-aa8c56e49800/public)
6
7It's currently super limited (no pagination, editing data, data-type specific viewers), and is just a couple dozens lines of code over a couple different vals. Forks encouraged! Just comment on the val if you add any features that you want to share.

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install 

4
5function App() {
6  const [imageId, setImageId] = useState(null);
7  const [file, setFile] = useState(null);
8  const imageRef = useRef(null);
9  const [cornerstoneLoaded, setCornerstoneLoaded] = useState(false);
10
11  useEffect(() => {
12    let cornerstone, cornerstoneWADOImageLoader, dicomParser;
13
14    async function loadLibraries() {
15      cornerstone = (await import("https://esm.sh/cornerstone-core")).default;
16      cornerstoneWADOImageLoader = (await import("https://esm.sh/cornerstone-wado-image-loader")).default;
17      dicomParser = (await import("https://esm.sh/dicom-parser")).default;
18
19      cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
20      cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
21      cornerstoneWADOImageLoader.configure({
22        useWebWorkers: false,
23      });
30
31  useEffect(() => {
32    if (cornerstoneLoaded && imageId && imageRef.current) {
33      import("https://esm.sh/cornerstone-core").then((cornerstone) => {
34        cornerstone.default.enable(imageRef.current);
35        cornerstone.default.loadImage(imageId).then(image => {
36          cornerstone.default.displayImage(imageRef.current, image);
37        });
38      });
39    }
40  }, [imageId, cornerstoneLoaded]);
41
42  const handleFileChange = async (event) => {
44    if (selectedFile) {
45      setFile(selectedFile);
46      const cornerstoneWADOImageLoader = (await import("https://esm.sh/cornerstone-wado-image-loader")).default;
47      const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(selectedFile);
48      setImageId(imageId);
49    }
50  };
67      <h1>DICOM Viewer</h1>
68      <input type="file" accept=".dcm" onChange={handleFileChange} />
69      <div ref={imageRef} className="cornerstone-viewport" />
70      {file && (
71        <button onClick={handleDownload} className="download-button">