Model pictures: a model's own image, read through the bridge as a data: URL

/api/v2/models names each model's picture (image, readable with the app's
token at /api/v2/models/images/<file>). A command reads it in Rust -- one
plain file name on the app's door, one of the four types the server accepts,
at most its 2 MB -- and hands the page a data: URL, which its policy already
allows. The avatar shows it once it arrives; the coloured initial stays for a
model without one and until then.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src-tauri/src/lib.rs

@@ -425,6 +425,18 @@ async fn api_text(handle: AppHandle, path: String) -> Result<String, ApiError> {
     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<String, ApiError> {
+    let Some((app_url, token)) = handle.state::<App>().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,

src-tauri/src/server.rs

@@ -507,6 +507,82 @@ pub fn request_text(app: &str, token: &str, path: &str) -> Result<String, ApiErr
     Ok(text)
 }
 
+/// The most a model's picture may be: the server's own limit for one (2 MB), and a little room.
+pub const IMAGE_LIMIT: u64 = 2 * 1024 * 1024 + 4096;
+
+/// The pictures a model may have, by the type the server serves them as: the four it accepts on
+/// upload. Nothing else is shown, whatever the server says it is.
+const IMAGE_TYPES: [&str; 4] = ["image/png", "image/jpeg", "image/webp", "image/gif"];
+
+/// A model's picture path as `/api/v2/models` names it (`/api/v2/models/images/<file>`), on the
+/// app's door: `/models/images/<file>`, or None for anything else. One plain file name, no more.
+pub fn image_path(path: &str) -> Option<String> {
+    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<String, ApiError> {
+    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");

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;

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
+// Models as the person picks them: each with its avatar. A model with a picture (`image` in
-// model without an uploaded image -- its initial on a colour of its own, the hue worked out from
+// /api/v2/models) shows it, read through the bridge with the app's token and handed to the page
-// the model's id exactly as the server does it (`stable_hue`: the first two bytes of the id's
+// as a `data:` URL; until it arrives, and for a model without one, the avatar is what the
-// MD5, modulo 360), so a model looks the same in the app and in the browser. Saturation and
+// 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
 }