Skip to content

Commit

Permalink
Add blurhash to gallery
Browse files Browse the repository at this point in the history
  • Loading branch information
@tarkah
tarkah committed Feb 6, 2025
1 parent 4bbb5cb commit 5572e48
Show file tree
Hide file tree
Showing 4 changed files with 173 additions and 37 deletions.
7 changes: 7 additions & 0 deletions Cargo.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions examples/gallery/Cargo.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,7 @@ bytes.workspace = true
image.workspace = true
tokio.workspace = true

blurhash = "0.2.3"

[lints]
workspace = true
33 changes: 29 additions & 4 deletions examples/gallery/src/civitai.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ use std::sync::Arc;
pub struct Image {
pub id: Id,
url: String,
hash: String,
}

impl Image {
Expand Down Expand Up @@ -40,20 +41,37 @@ impl Image {
Ok(response.items)
}

pub async fn blurhash(
self,
width: u32,
height: u32,
) -> Result<Rgba, Error> {
task::spawn_blocking(move || {
let pixels = blurhash::decode(&self.hash, width, height, 1.0)?;

Ok::<_, Error>(Rgba {
width,
height,
pixels: Bytes::from(pixels),
})
})
.await?
}

pub async fn download(self, size: Size) -> Result<Rgba, Error> {
let client = reqwest::Client::new();

let bytes = client
.get(match size {
Size::Original => self.url,
Size::Thumbnail => self
Size::Thumbnail { width } => self
.url
.split("/")
.map(|part| {
if part.starts_with("width=") {
"width=640"
format!("width={width}")
} else {
part
part.to_string()
}
})
.collect::<Vec<_>>()
Expand Down Expand Up @@ -107,7 +125,7 @@ impl fmt::Debug for Rgba {
#[derive(Debug, Clone, Copy)]
pub enum Size {
Original,
Thumbnail,
Thumbnail { width: u16 },
}

#[derive(Debug, Clone)]
Expand All @@ -117,6 +135,7 @@ pub enum Error {
IOFailed(Arc<io::Error>),
JoinFailed(Arc<task::JoinError>),
ImageDecodingFailed(Arc<image::ImageError>),
BlurhashDecodingFailed(Arc<blurhash::Error>),
}

impl From<reqwest::Error> for Error {
Expand All @@ -142,3 +161,9 @@ impl From<image::ImageError> for Error {
Self::ImageDecodingFailed(Arc::new(error))
}
}

impl From<blurhash::Error> for Error {
fn from(error: blurhash::Error) -> Self {
Self::BlurhashDecodingFailed(Arc::new(error))
}
}
168 changes: 135 additions & 33 deletions examples/gallery/src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ use iced::{
};

use std::collections::HashMap;
use std::time::Duration;

fn main() -> iced::Result {
iced::application("Gallery - Iced", Gallery::update, Gallery::view)
Expand All @@ -28,7 +29,7 @@ fn main() -> iced::Result {

struct Gallery {
images: Vec<Image>,
thumbnails: HashMap<Id, Thumbnail>,
previews: HashMap<Id, Preview>,
viewer: Viewer,
now: Instant,
}
Expand All @@ -40,6 +41,7 @@ enum Message {
ImageDownloaded(Result<Rgba, Error>),
ThumbnailDownloaded(Id, Result<Rgba, Error>),
ThumbnailHovered(Id, bool),
BlurhashDecoded(Id, Result<Rgba, Error>),
Open(Id),
Close,
Animate(Instant),
Expand All @@ -50,7 +52,7 @@ impl Gallery {
(
Self {
images: Vec::new(),
thumbnails: HashMap::new(),
previews: HashMap::new(),
viewer: Viewer::new(),
now: Instant::now(),
},
Expand All @@ -64,7 +66,7 @@ impl Gallery {

pub fn subscription(&self) -> Subscription<Message> {
let is_animating = self
.thumbnails
.previews
.values()
.any(|thumbnail| thumbnail.is_animating(self.now))
|| self.viewer.is_animating(self.now);
Expand Down Expand Up @@ -93,28 +95,53 @@ impl Gallery {
return Task::none();
};

Task::perform(image.download(Size::Thumbnail), move |result| {
Message::ThumbnailDownloaded(id, result)
})
Task::batch(vec![
Task::perform(
image.clone().blurhash(
Preview::WIDTH as u32,
Preview::HEIGHT as u32,
),
move |result| Message::BlurhashDecoded(id, result),
),
Task::perform(
image.download(Size::Thumbnail {
width: Preview::WIDTH,
}),
move |result| Message::ThumbnailDownloaded(id, result),
),
])
}
Message::ImageDownloaded(Ok(rgba)) => {
self.viewer.show(rgba);

Task::none()
}
Message::ThumbnailDownloaded(id, Ok(rgba)) => {
let thumbnail = Thumbnail::new(rgba);
let _ = self.thumbnails.insert(id, thumbnail);
let blurhash = match self.previews.remove(&id) {
Some(Preview::Blurhash(blurhash)) => Some(blurhash),
_ => None,
};

let _ = self
.previews
.insert(id, Preview::thumbnail(self.now, blurhash, rgba));

Task::none()
}
Message::ThumbnailHovered(id, is_hovered) => {
if let Some(thumbnail) = self.thumbnails.get_mut(&id) {
thumbnail.zoom.go_mut(is_hovered);
if let Some(Preview::Thumbnail { zoom, .. }) =
self.previews.get_mut(&id)
{
zoom.go_mut(is_hovered);
}

Task::none()
}
Message::BlurhashDecoded(id, Ok(rgba)) => {
let _ = self.previews.insert(id, Preview::blurhash(rgba));

Task::none()
}
Message::Open(id) => {
let Some(image) = self
.images
Expand Down Expand Up @@ -144,7 +171,8 @@ impl Gallery {
}
Message::ImagesListed(Err(error))
| Message::ImageDownloaded(Err(error))
| Message::ThumbnailDownloaded(_, Err(error)) => {
| Message::ThumbnailDownloaded(_, Err(error))
| Message::BlurhashDecoded(_, Err(error)) => {
dbg!(error);

Task::none()
Expand All @@ -157,7 +185,7 @@ impl Gallery {
row((0..=Image::LIMIT).map(|_| placeholder()))
} else {
row(self.images.iter().map(|image| {
card(image, self.thumbnails.get(&image.id), self.now)
card(image, self.previews.get(&image.id), self.now)
}))
}
.spacing(10)
Expand All @@ -174,31 +202,66 @@ impl Gallery {

fn card<'a>(
metadata: &'a Image,
thumbnail: Option<&'a Thumbnail>,
preview: Option<&'a Preview>,
now: Instant,
) -> Element<'a, Message> {
let image: Element<'_, _> = if let Some(thumbnail) = thumbnail {
image(&thumbnail.handle)
let image: Element<'_, _> = match preview {
Some(Preview::Blurhash(Blurhash { handle, fade_in })) => image(handle)
.width(Fill)
.height(Fill)
.content_fit(ContentFit::Cover)
.opacity(thumbnail.fade_in.interpolate(0.0, 1.0, now))
.scale(thumbnail.zoom.interpolate(1.0, 1.1, now))
.into()
} else {
horizontal_space().into()
.opacity(fade_in.interpolate(0.0, 1.0, now))
.into(),
// Blurhash still needs to fade all the way in
Some(Preview::Thumbnail {
blurhash: Some(blurhash),
..
}) if blurhash.fade_in.is_animating(now) => image(&blurhash.handle)
.width(Fill)
.height(Fill)
.content_fit(ContentFit::Cover)
.opacity(blurhash.fade_in.interpolate(0.0, 1.0, now))
.into(),
Some(Preview::Thumbnail {
blurhash,
thumbnail,
fade_in,
zoom,
}) => stack![]
// Transition between blurhash & thumbnail over the fade-in period
.push_maybe(
blurhash.as_ref().filter(|_| fade_in.is_animating(now)).map(
|blurhash| {
image(&blurhash.handle)
.width(Fill)
.height(Fill)
.content_fit(ContentFit::Cover)
.opacity(fade_in.interpolate(1.0, 0.0, now))
},
),
)
.push(
image(thumbnail)
.width(Fill)
.height(Fill)
.content_fit(ContentFit::Cover)
.opacity(fade_in.interpolate(0.0, 1.0, now))
.scale(zoom.interpolate(1.0, 1.1, now)),
)
.into(),
None => horizontal_space().into(),
};

let card = mouse_area(
container(image)
.width(Thumbnail::WIDTH)
.height(Thumbnail::HEIGHT)
.width(Preview::WIDTH)
.height(Preview::HEIGHT)
.style(container::dark),
)
.on_enter(Message::ThumbnailHovered(metadata.id, true))
.on_exit(Message::ThumbnailHovered(metadata.id, false));

if thumbnail.is_some() {
if preview.is_some() {
button(card)
.on_press(Message::Open(metadata.id))
.padding(0)
Expand All @@ -213,38 +276,77 @@ fn card<'a>(

fn placeholder<'a>() -> Element<'a, Message> {
container(horizontal_space())
.width(Thumbnail::WIDTH)
.height(Thumbnail::HEIGHT)
.width(Preview::WIDTH)
.height(Preview::HEIGHT)
.style(container::dark)
.into()
}

struct Thumbnail {
handle: image::Handle,
struct Blurhash {
fade_in: Animation<bool>,
zoom: Animation<bool>,
handle: image::Handle,
}

impl Thumbnail {
enum Preview {
Blurhash(Blurhash),
Thumbnail {
blurhash: Option<Blurhash>,
thumbnail: image::Handle,
fade_in: Animation<bool>,
zoom: Animation<bool>,
},
}

impl Preview {
const WIDTH: u16 = 320;
const HEIGHT: u16 = 410;

fn new(rgba: Rgba) -> Self {
Self {
fn blurhash(rgba: Rgba) -> Self {
Self::Blurhash(Blurhash {
fade_in: Animation::new(false).quick().go(true),
handle: image::Handle::from_rgba(
rgba.width,
rgba.height,
rgba.pixels,
),
fade_in: Animation::new(false).slow().go(true),
})
}

fn thumbnail(now: Instant, blurhash: Option<Blurhash>, rgba: Rgba) -> Self {
// Delay the thumbnail fade in until blurhash is fully
// faded in itself
let delay = blurhash
.as_ref()
.map(|blurhash| {
Duration::from_millis(
blurhash.fade_in.interpolate(0.0, 200.0, now) as u64,
)
})
.unwrap_or_default();

Self::Thumbnail {
blurhash,
thumbnail: image::Handle::from_rgba(
rgba.width,
rgba.height,
rgba.pixels,
),
fade_in: Animation::new(false).very_slow().delay(delay).go(true),
zoom: Animation::new(false)
.quick()
.easing(animation::Easing::EaseInOut),
}
}

fn is_animating(&self, now: Instant) -> bool {
self.fade_in.is_animating(now) || self.zoom.is_animating(now)
match self {
Preview::Blurhash(Blurhash { fade_in, .. }) => {
fade_in.is_animating(now)
}
Preview::Thumbnail { fade_in, zoom, .. } => {
fade_in.is_animating(now) || zoom.is_animating(now)
}
}
}
}

Expand Down

0 comments on commit 5572e48

Please sign in to comment.