diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs index c9ee248..dff47df 100644 --- a/src-tauri/src/lib.rs +++ b/src-tauri/src/lib.rs @@ -425,6 +425,18 @@ async fn api_text(handle: AppHandle, path: String) -> Result { result } +/// A model's picture (`image` in `/api/v2/models`), as a `data:` URL: the page's policy allows +/// images from `data:` and reaches the server only through the bridge. +#[tauri::command] +async fn model_image(handle: AppHandle, path: String) -> Result { + let Some((app_url, token)) = handle.state::().door() else { + return Err(ApiError::new(401, "Not signed in.")); + }; + tauri::async_runtime::spawn_blocking(move || server::request_image(&app_url, &token, &path)) + .await + .map_err(|e| ApiError::new(0, e.to_string()))? +} + /// A frame of a reply being written, as the page hears it. #[derive(Clone, Serialize)] struct Frame { @@ -1423,6 +1435,7 @@ pub fn run() { sign_out, api, api_text, + model_image, stream_open, stream_close, local_list, diff --git a/src-tauri/src/server.rs b/src-tauri/src/server.rs index 26b6563..943eba2 100644 --- a/src-tauri/src/server.rs +++ b/src-tauri/src/server.rs @@ -507,6 +507,82 @@ pub fn request_text(app: &str, token: &str, path: &str) -> Result`), on the +/// app's door: `/models/images/`, or None for anything else. One plain file name, no more. +pub fn image_path(path: &str) -> Option { + let rest = path.strip_prefix("/api/v2").unwrap_or(path); + let name = rest.strip_prefix("/models/images/")?; + let plain = !name.is_empty() + && name + .chars() + .all(|c| c.is_ascii_alphanumeric() || matches!(c, '.' | '-' | '_')) + && !name.starts_with('.'); + plain.then(|| format!("/models/images/{name}")) +} + +/// A model's picture, as a `data:` URL the page can show without a request of its own (its +/// policy allows images from `data:` and nowhere else on the network). Read with the app's +/// token, as the page reads nothing itself. +pub fn request_image(app: &str, token: &str, path: &str) -> Result { + let Some(path) = image_path(path) else { + return Err(ApiError::new(400, format!("Not a model's picture: {path}"))); + }; + let res = agent(Duration::from_secs(30)) + .get(&format!("{app}{path}")) + .set("authorization", &format!("Bearer {token}")) + .call()?; + let kind = res + .content_type() + .split(';') + .next() + .unwrap_or("") + .trim() + .to_ascii_lowercase(); + if !IMAGE_TYPES.contains(&kind.as_str()) { + return Err(ApiError::new(415, format!("Not a picture: {kind}"))); + } + let mut bytes = Vec::new(); + res.into_reader() + .take(IMAGE_LIMIT) + .read_to_end(&mut bytes) + .map_err(|e| ApiError::new(0, format!("The server's answer could not be read: {e}")))?; + if bytes.len() as u64 >= IMAGE_LIMIT { + return Err(ApiError::new(413, "The picture is too large.")); + } + Ok(format!("data:{kind};base64,{}", base64(&bytes))) +} + +/// Standard base64 with padding (RFC 4648 §4): a picture's bytes in a `data:` URL. +pub fn base64(bytes: &[u8]) -> String { + const ABC: &[u8; 64] = b"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; + let mut out = String::with_capacity(bytes.len().div_ceil(3) * 4); + for chunk in bytes.chunks(3) { + let n = (u32::from(chunk[0]) << 16) + | (u32::from(*chunk.get(1).unwrap_or(&0)) << 8) + | u32::from(*chunk.get(2).unwrap_or(&0)); + out.push(ABC[((n >> 18) & 63) as usize] as char); + out.push(ABC[((n >> 12) & 63) as usize] as char); + out.push(if chunk.len() > 1 { + ABC[((n >> 6) & 63) as usize] as char + } else { + '=' + }); + out.push(if chunk.len() > 2 { + ABC[(n & 63) as usize] as char + } else { + '=' + }); + } + out +} + /// The most a file sent as an attachment may be here. The server has its own limit (20 MB by /// default, an administrator may change it) and says so in its words; this one only keeps a /// file far beyond any server's limit from being read into memory at all. @@ -788,6 +864,39 @@ mod tests { } } + #[test] + fn a_models_picture_is_one_file_on_the_app_door() { + assert_eq!( + image_path("/api/v2/models/images/0a1b2c3d4e5f.png").as_deref(), + Some("/models/images/0a1b2c3d4e5f.png") + ); + assert_eq!( + image_path("/models/images/a-b_c.webp").as_deref(), + Some("/models/images/a-b_c.webp") + ); + for bad in [ + "/api/v2/models/images/", + "/api/v2/models/images/../me", + "/api/v2/models/images/a/b.png", + "/api/v2/models/images/.hidden", + "/api/v2/chats/x", + "/uploads/models/a.png", + "https://elsewhere/models/images/a.png", + ] { + assert!(image_path(bad).is_none(), "{bad}"); + } + } + + #[test] + fn base64_is_the_standard_alphabet_with_padding() { + assert_eq!(base64(b""), ""); + assert_eq!(base64(b"f"), "Zg=="); + assert_eq!(base64(b"fo"), "Zm8="); + assert_eq!(base64(b"foo"), "Zm9v"); + assert_eq!(base64(b"foobar"), "Zm9vYmFy"); + assert_eq!(base64(&[0xfb, 0xff]), "+/8="); + } + #[test] fn a_file_goes_as_one_multipart_field() { let body = multipart("XYZ", "a\"b\r\n.txt", b"hello"); diff --git a/ui/app.css b/ui/app.css index f31234d..c156d24 100644 --- a/ui/app.css +++ b/ui/app.css @@ -449,6 +449,9 @@ label, .label { font: var(--text-sm) / var(--leading-tight) var(--font-ui); colo flex: none; } .avatar--none { background: var(--surface-active); } +/* A model's own picture fills the same square, cut to it: the avatar's size does not depend on it. */ +.avatar--image { overflow: hidden; background: var(--surface); } +.avatar--image img { display: block; width: 100%; height: 100%; object-fit: cover; } /* The model picker: a button the height of a control, avatar · name · chevron. */ .picker { display: inline-grid; diff --git a/ui/js/models.js b/ui/js/models.js index 6ed567b..591f28a 100644 --- a/ui/js/models.js +++ b/ui/js/models.js @@ -1,12 +1,24 @@ -// Models as the person picks them: each with its avatar, as the server's web interface draws a -// model without an uploaded image -- its initial on a colour of its own, the hue worked out from -// the model's id exactly as the server does it (`stable_hue`: the first two bytes of the id's -// MD5, modulo 360), so a model looks the same in the app and in the browser. Saturation and +// Models as the person picks them: each with its avatar. A model with a picture (`image` in +// /api/v2/models) shows it, read through the bridge with the app's token and handed to the page +// as a `data:` URL; until it arrives, and for a model without one, the avatar is what the +// server's web interface draws then -- its initial on a colour of its own, the hue worked out +// from the model's id exactly as the server does it (`stable_hue`: the first two bytes of the +// id's MD5, modulo 360), so a model looks the same in the app and in the browser. Saturation and // lightness are the theme's (app.css), only the hue is the model's. import { h, icon, ICONS } from "./dom.js" +import { invoke } from "./bridge.js" import { menu } from "./popup.js" +// Each picture once per run: its path -> a promise of its `data:` URL (null when it cannot be had, +// so a missing picture is not asked for again with every redraw). +const pictures = new Map() + +function picture(path) { + if (!pictures.has(path)) pictures.set(path, invoke("model_image", { path }).catch(() => null)) + return pictures.get(path) +} + /** MD5 of a string's UTF-8 bytes (RFC 1321), as 16 bytes. For a colour, not for security. */ function md5(text) { const bytes = new TextEncoder().encode(text) @@ -53,11 +65,18 @@ export function stableHue(id) { return ((d[0] << 8) | d[1]) % 360 } -/** A model's avatar: its initial on its own colour. */ +/** A model's avatar: its picture, or its initial on its own colour while there is none. */ export function avatar(model) { const label = String(model?.name || model?.id || "?").trim() || "?" const el = h("span", { class: "avatar", "aria-hidden": "true", text: label[0].toUpperCase() }) el.style.setProperty("--avatar-hue", String(stableHue(model?.id || label))) + if (typeof model?.image === "string" && model.image) { + picture(model.image).then((url) => { + if (!url || !url.startsWith("data:image/")) return + el.classList.add("avatar--image") + el.replaceChildren(h("img", { src: url, alt: "", draggable: "false" })) + }) + } return el }