ashryanio
#DevRel human @nylas. #JavaScript hacker. #vinyl newb. Life tourist.
Co-host of I’d Rather Be Scripting #podcast with Kerri Shotts.
Public vals
11
ashryanio
getBlobAndRenderAsImage
HTTP
getBlobAndRenderAsImage Shows how to get a Val Town blob and render it as an image in the DOM with React. Setup Make sure you have an image named test.png in your Val Town blob storage (alternatively, you can change the key name in the blob getter in the script). To easily upload an image to your blob storage, fork this val , run it, and enter your API key in the password input. How it works Fetching the blob: The client-side React component makes a fetch request to "/image". This request is handled by our server function. Server-side handling: The server function calls blob.get("test.png") . This blob.get() method makes an HTTP request to the Val Town API. The API returns a Response object containing the image data. Processing the blob on the server: We receive this Response object from blob.get() . We don't need to extract the data on the server side. We can directly return this Response object to the client. Sending the response to the client: We set the appropriate "Content-Type" header (e.g., "image/png"). We return the Response object to the client. Client-side handling: The fetch request in the React component receives the Response. We call response.blob() to get a Blob object from the Response. Creating a data URL: We create a FileReader object. We use FileReader to read the Blob as a data URL. This data URL is a base64-encoded string representing the image. Updating the React state: We set the data URL as the state of our component. Rendering the image: We use the data URL as the src attribute of an <img> tag. The browser decodes the base64 data and renders the image. Further reading on Val Town blobs Blob storage overview in Val Town docs Val Town REST API references for blobs Val Town blob std lib source code
0
ashryanio
routineTrackerApp
HTTP
Routine Tracker This is a little React component to make our 7yo's after school routine self-serve so she can be a bit more independent after school. To change the items in the list, modify the routineTasks array of objects: [
{name: "item", timed: false},
{name: "item 2", timed: true, duration: 2 * 60 }
{name: "item 3", timed: false, requiresParent: true}
] You can set the parent password on this line: const PARENT_PASSWORD_HASH = simpleHash("1234"); Todos Make the parent password modal touch friendly Track dates/times of list completions Show a tracker of how many completions this week
4
ashryanio
openAiProxy
HTTP
openAiProxy Overview This val is a proxy server that interacts with the OpenAI API to generate responses based on prompts in the request body. The function handles incoming HTTP POST requests, processes the prompt, and returns a response generated by the LLM. Prerequisites Server-side: (Optional) An active OpenAI API key Client-side: Something that can make POST requests (browser code, Postman, cURL, another Val, etc) Usage Endpoint The primary endpoint for this function is designed to handle HTTP POST requests. Request Method : POST Content-Type : application/json Body : JSON object containing a prompt field (e.g. {"prompt": "Help me make a boat."} ) Example Request curl -X POST https://ashryanio-openaiproxy.web.val.run -H "Content-Type: application/json" -d '{"prompt": "Hello, OpenAI!"}' Response Content-Type : application/json Body : JSON object containing the response from the OpenAI language model. Example Response {
"llmResponse": "Hi there! How can I assist you today?"
} Error Handling 400 Bad Request : Returned if the prompt field is missing in the request body. 405 Method Not Allowed : Returned if any method other than POST or OPTIONS is used. 500 Internal Server Error : Returned if there is an error processing the request.
1