Compare commits

..

1 Commits

Author SHA1 Message Date
minori 1092d21cf1 deps: update @tauri-apps/cli to 2.10.1
Security Scan and Upload / Security & DefectDojo Upload (pull_request) Successful in 1m21s
CI / Lint & Check (pull_request) Successful in 13m43s
CI / Build Windows (pull_request) Failing after 9m8s
2026-04-10 07:06:23 -07:00
11 changed files with 142 additions and 536 deletions
+1 -1
View File
@@ -20,7 +20,7 @@
"devDependencies": { "devDependencies": {
"@nhcarrigan/eslint-config": "5.2.0", "@nhcarrigan/eslint-config": "5.2.0",
"@nhcarrigan/typescript-config": "4.0.0", "@nhcarrigan/typescript-config": "4.0.0",
"@tauri-apps/cli": "2.5.0", "@tauri-apps/cli": "2.10.1",
"@types/react": "19.1.2", "@types/react": "19.1.2",
"@types/react-dom": "19.1.2", "@types/react-dom": "19.1.2",
"autoprefixer": "10.4.21", "autoprefixer": "10.4.21",
+49 -49
View File
@@ -31,8 +31,8 @@ importers:
specifier: 4.0.0 specifier: 4.0.0
version: 4.0.0(typescript@5.8.3) version: 4.0.0(typescript@5.8.3)
'@tauri-apps/cli': '@tauri-apps/cli':
specifier: 2.5.0 specifier: 2.10.1
version: 2.5.0 version: 2.10.1
'@types/react': '@types/react':
specifier: 19.1.2 specifier: 19.1.2
version: 19.1.2 version: 19.1.2
@@ -578,74 +578,74 @@ packages:
'@tauri-apps/api@2.5.0': '@tauri-apps/api@2.5.0':
resolution: {integrity: sha512-Ldux4ip+HGAcPUmuLT8EIkk6yafl5vK0P0c0byzAKzxJh7vxelVtdPONjfgTm96PbN24yjZNESY8CKo8qniluA==} resolution: {integrity: sha512-Ldux4ip+HGAcPUmuLT8EIkk6yafl5vK0P0c0byzAKzxJh7vxelVtdPONjfgTm96PbN24yjZNESY8CKo8qniluA==}
'@tauri-apps/cli-darwin-arm64@2.5.0': '@tauri-apps/cli-darwin-arm64@2.10.1':
resolution: {integrity: sha512-VuVAeTFq86dfpoBDNYAdtQVLbP0+2EKCHIIhkaxjeoPARR0sLpFHz2zs0PcFU76e+KAaxtEtAJAXGNUc8E1PzQ==} resolution: {integrity: sha512-Z2OjCXiZ+fbYZy7PmP3WRnOpM9+Fy+oonKDEmUE6MwN4IGaYqgceTjwHucc/kEEYZos5GICve35f7ZiizgqEnQ==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [darwin] os: [darwin]
'@tauri-apps/cli-darwin-x64@2.5.0': '@tauri-apps/cli-darwin-x64@2.10.1':
resolution: {integrity: sha512-hUF01sC06cZVa8+I0/VtsHOk9BbO75rd+YdtHJ48xTdcYaQ5QIwL4yZz9OR1AKBTaUYhBam8UX9Pvd5V2/4Dpw==} resolution: {integrity: sha512-V/irQVvjPMGOTQqNj55PnQPVuH4VJP8vZCN7ajnj+ZS8Kom1tEM2hR3qbbIRoS3dBKs5mbG8yg1WC+97dq17Pw==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [darwin] os: [darwin]
'@tauri-apps/cli-linux-arm-gnueabihf@2.5.0': '@tauri-apps/cli-linux-arm-gnueabihf@2.10.1':
resolution: {integrity: sha512-LQKqttsK252LlqYyX8R02MinUsfFcy3+NZiJwHFgi5Y3+ZUIAED9cSxJkyNtuY5KMnR4RlpgWyLv4P6akN1xhg==} resolution: {integrity: sha512-Hyzwsb4VnCWKGfTw+wSt15Z2pLw2f0JdFBfq2vHBOBhvg7oi6uhKiF87hmbXOBXUZaGkyRDkCHsdzJcIfoJC2w==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
'@tauri-apps/cli-linux-arm64-gnu@2.5.0': '@tauri-apps/cli-linux-arm64-gnu@2.10.1':
resolution: {integrity: sha512-mTQufsPcpdHg5RW0zypazMo4L55EfeE5snTzrPqbLX4yCK2qalN7+rnP8O8GT06xhp6ElSP/Ku1M2MR297SByQ==} resolution: {integrity: sha512-OyOYs2t5GkBIvyWjA1+h4CZxTcdz1OZPCWAPz5DYEfB0cnWHERTnQ/SLayQzncrT0kwRoSfSz9KxenkyJoTelA==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
'@tauri-apps/cli-linux-arm64-musl@2.5.0': '@tauri-apps/cli-linux-arm64-musl@2.10.1':
resolution: {integrity: sha512-rQO1HhRUQqyEaal5dUVOQruTRda/TD36s9kv1hTxZiFuSq3558lsTjAcUEnMAtBcBkps20sbyTJNMT0AwYIk8Q==} resolution: {integrity: sha512-MIj78PDDGjkg3NqGptDOGgfXks7SYJwhiMh8SBoZS+vfdz7yP5jN18bNaLnDhsVIPARcAhE1TlsZe/8Yxo2zqg==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
'@tauri-apps/cli-linux-riscv64-gnu@2.5.0': '@tauri-apps/cli-linux-riscv64-gnu@2.10.1':
resolution: {integrity: sha512-7oS18FN46yDxyw1zX/AxhLAd7T3GrLj3Ai6s8hZKd9qFVzrAn36ESL7d3G05s8wEtsJf26qjXnVF4qleS3dYsA==} resolution: {integrity: sha512-X0lvOVUg8PCVaoEtEAnpxmnkwlE1gcMDTqfhbefICKDnOTJ5Est3qL0SrWxizDackIOKBcvtpejrSiVpuJI1kw==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [riscv64] cpu: [riscv64]
os: [linux] os: [linux]
'@tauri-apps/cli-linux-x64-gnu@2.5.0': '@tauri-apps/cli-linux-x64-gnu@2.10.1':
resolution: {integrity: sha512-SG5sFNL7VMmDBdIg3nO3EzNRT306HsiEQ0N90ILe3ZABYAVoPDO/ttpCO37ApLInTzrq/DLN+gOlC/mgZvLw1w==} resolution: {integrity: sha512-2/12bEzsJS9fAKybxgicCDFxYD1WEI9kO+tlDwX5znWG2GwMBaiWcmhGlZ8fi+DMe9CXlcVarMTYc0L3REIRxw==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
'@tauri-apps/cli-linux-x64-musl@2.5.0': '@tauri-apps/cli-linux-x64-musl@2.10.1':
resolution: {integrity: sha512-QXDM8zp/6v05PNWju5ELsVwF0VH1n6b5pk2E6W/jFbbiwz80Vs1lACl9pv5kEHkrxBj+aWU/03JzGuIj2g3SkQ==} resolution: {integrity: sha512-Y8J0ZzswPz50UcGOFuXGEMrxbjwKSPgXftx5qnkuMs2rmwQB5ssvLb6tn54wDSYxe7S6vlLob9vt0VKuNOaCIQ==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
'@tauri-apps/cli-win32-arm64-msvc@2.5.0': '@tauri-apps/cli-win32-arm64-msvc@2.10.1':
resolution: {integrity: sha512-pFSHFK6b+o9y4Un8w0gGLwVyFTZaC3P0kQ7umRt/BLDkzD5RnQ4vBM7CF8BCU5nkwmEBUCZd7Wt3TWZxe41o6Q==} resolution: {integrity: sha512-iSt5B86jHYAPJa/IlYw++SXtFPGnWtFJriHn7X0NFBVunF6zu9+/zOn8OgqIWSl8RgzhLGXQEEtGBdR4wzpVgg==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [arm64] cpu: [arm64]
os: [win32] os: [win32]
'@tauri-apps/cli-win32-ia32-msvc@2.5.0': '@tauri-apps/cli-win32-ia32-msvc@2.10.1':
resolution: {integrity: sha512-EArv1IaRlogdLAQyGlKmEqZqm5RfHCUMhJoedWu7GtdbOMUfSAz6FMX2boE1PtEmNO4An+g188flLeVErrxEKg==} resolution: {integrity: sha512-gXyxgEzsFegmnWywYU5pEBURkcFN/Oo45EAwvZrHMh+zUSEAvO5E8TXsgPADYm31d1u7OQU3O3HsYfVBf2moHw==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [ia32] cpu: [ia32]
os: [win32] os: [win32]
'@tauri-apps/cli-win32-x64-msvc@2.5.0': '@tauri-apps/cli-win32-x64-msvc@2.10.1':
resolution: {integrity: sha512-lj43EFYbnAta8pd9JnUq87o+xRUR0odz+4rixBtTUwUgdRdwQ2V9CzFtsMu6FQKpFQ6mujRK6P1IEwhL6ADRsQ==} resolution: {integrity: sha512-6Cn7YpPFwzChy0ERz6djKEmUehWrYlM+xTaNzGPgZocw3BD7OfwfWHKVWxXzdjEW2KfKkHddfdxK1XXTYqBRLg==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
'@tauri-apps/cli@2.5.0': '@tauri-apps/cli@2.10.1':
resolution: {integrity: sha512-rAtHqG0Gh/IWLjN2zTf3nZqYqbo81oMbqop56rGTjrlWk9pTTAjkqOjSL9XQLIMZ3RbeVjveCqqCA0s8RnLdMg==} resolution: {integrity: sha512-jQNGF/5quwORdZSSLtTluyKQ+o6SMa/AUICfhf4egCGFdMHqWssApVgYSbg+jmrZoc8e1DscNvjTnXtlHLS11g==}
engines: {node: '>= 10'} engines: {node: '>= 10'}
hasBin: true hasBin: true
@@ -2849,52 +2849,52 @@ snapshots:
'@tauri-apps/api@2.5.0': {} '@tauri-apps/api@2.5.0': {}
'@tauri-apps/cli-darwin-arm64@2.5.0': '@tauri-apps/cli-darwin-arm64@2.10.1':
optional: true optional: true
'@tauri-apps/cli-darwin-x64@2.5.0': '@tauri-apps/cli-darwin-x64@2.10.1':
optional: true optional: true
'@tauri-apps/cli-linux-arm-gnueabihf@2.5.0': '@tauri-apps/cli-linux-arm-gnueabihf@2.10.1':
optional: true optional: true
'@tauri-apps/cli-linux-arm64-gnu@2.5.0': '@tauri-apps/cli-linux-arm64-gnu@2.10.1':
optional: true optional: true
'@tauri-apps/cli-linux-arm64-musl@2.5.0': '@tauri-apps/cli-linux-arm64-musl@2.10.1':
optional: true optional: true
'@tauri-apps/cli-linux-riscv64-gnu@2.5.0': '@tauri-apps/cli-linux-riscv64-gnu@2.10.1':
optional: true optional: true
'@tauri-apps/cli-linux-x64-gnu@2.5.0': '@tauri-apps/cli-linux-x64-gnu@2.10.1':
optional: true optional: true
'@tauri-apps/cli-linux-x64-musl@2.5.0': '@tauri-apps/cli-linux-x64-musl@2.10.1':
optional: true optional: true
'@tauri-apps/cli-win32-arm64-msvc@2.5.0': '@tauri-apps/cli-win32-arm64-msvc@2.10.1':
optional: true optional: true
'@tauri-apps/cli-win32-ia32-msvc@2.5.0': '@tauri-apps/cli-win32-ia32-msvc@2.10.1':
optional: true optional: true
'@tauri-apps/cli-win32-x64-msvc@2.5.0': '@tauri-apps/cli-win32-x64-msvc@2.10.1':
optional: true optional: true
'@tauri-apps/cli@2.5.0': '@tauri-apps/cli@2.10.1':
optionalDependencies: optionalDependencies:
'@tauri-apps/cli-darwin-arm64': 2.5.0 '@tauri-apps/cli-darwin-arm64': 2.10.1
'@tauri-apps/cli-darwin-x64': 2.5.0 '@tauri-apps/cli-darwin-x64': 2.10.1
'@tauri-apps/cli-linux-arm-gnueabihf': 2.5.0 '@tauri-apps/cli-linux-arm-gnueabihf': 2.10.1
'@tauri-apps/cli-linux-arm64-gnu': 2.5.0 '@tauri-apps/cli-linux-arm64-gnu': 2.10.1
'@tauri-apps/cli-linux-arm64-musl': 2.5.0 '@tauri-apps/cli-linux-arm64-musl': 2.10.1
'@tauri-apps/cli-linux-riscv64-gnu': 2.5.0 '@tauri-apps/cli-linux-riscv64-gnu': 2.10.1
'@tauri-apps/cli-linux-x64-gnu': 2.5.0 '@tauri-apps/cli-linux-x64-gnu': 2.10.1
'@tauri-apps/cli-linux-x64-musl': 2.5.0 '@tauri-apps/cli-linux-x64-musl': 2.10.1
'@tauri-apps/cli-win32-arm64-msvc': 2.5.0 '@tauri-apps/cli-win32-arm64-msvc': 2.10.1
'@tauri-apps/cli-win32-ia32-msvc': 2.5.0 '@tauri-apps/cli-win32-ia32-msvc': 2.10.1
'@tauri-apps/cli-win32-x64-msvc': 2.5.0 '@tauri-apps/cli-win32-x64-msvc': 2.10.1
'@tauri-apps/plugin-dialog@2.3.0': '@tauri-apps/plugin-dialog@2.3.0':
dependencies: dependencies:
Binary file not shown.

Before

Width:  |  Height:  |  Size: 298 KiB

After

Width:  |  Height:  |  Size: 155 KiB

+21 -56
View File
@@ -46,19 +46,12 @@ fn build_safety_settings() -> Value {
]) ])
} }
fn build_generation_config( fn build_generation_config(mode: &str) -> Value {
mode: &str,
aspect_ratio: Option<&str>,
image_size: &str,
) -> Value {
let image_config = match mode { let image_config = match mode {
"avatar" => json!({ "aspectRatio": "1:1", "imageSize": image_size }), "avatar" => json!({ "aspectRatio": "1:1", "imageSize": "4K" }),
"art" => { "art" => json!({ "aspectRatio": "16:9", "imageSize": "4K" }),
let ratio = aspect_ratio.unwrap_or("16:9");
json!({ "aspectRatio": ratio, "imageSize": image_size })
}
// replace mode: omit aspectRatio so the model infers it from the source image // replace mode: omit aspectRatio so the model infers it from the source image
_ => json!({ "imageSize": image_size }), _ => json!({ "imageSize": "4K" }),
}; };
json!({ json!({
"imageConfig": image_config, "imageConfig": image_config,
@@ -90,56 +83,37 @@ fn build_user_gemini_parts(
user_image_base64: &Option<String>, user_image_base64: &Option<String>,
user_image_mime: &Option<String>, user_image_mime: &Option<String>,
) -> Vec<Value> { ) -> Vec<Value> {
if let Some(image_data) = user_image_base64.as_deref() { if mode == "replace" && user_image_base64.is_some() {
let mime = user_image_mime.as_deref().unwrap_or("image/png"); let mime = user_image_mime.as_deref().unwrap_or("image/png");
let data = user_image_base64.as_deref().unwrap_or("");
let base_text = user_text.as_deref().unwrap_or(""); let base_text = user_text.as_deref().unwrap_or("");
let final_text = if mode == "replace" { let final_text = if base_text.is_empty() {
if base_text.is_empty() { REPLACE_MODE_APPEND.to_string()
REPLACE_MODE_APPEND.to_string()
} else {
format!("{}\n{}", base_text, REPLACE_MODE_APPEND)
}
} else { } else {
base_text.to_string() format!("{}\n{}", base_text, REPLACE_MODE_APPEND)
}; };
let mut parts = vec![json!({"inlineData": {"mimeType": mime, "data": image_data}})]; vec![
if !final_text.is_empty() { json!({"inlineData": {"mimeType": mime, "data": data}}),
parts.push(json!({"text": final_text})); json!({"text": final_text}),
} ]
parts
} else { } else {
// No image: text-only message // Art/avatar mode, or replace mode follow-up correction (text only)
let text = user_text.as_deref().unwrap_or(""); let text = user_text.as_deref().unwrap_or("");
vec![json!({"text": text})] vec![json!({"text": text})]
} }
} }
pub struct GeminiCallParams {
pub mode: String,
pub aspect_ratio: Option<String>,
pub image_size: String,
pub user_text: Option<String>,
pub user_image_base64: Option<String>,
pub user_image_mime: Option<String>,
}
pub async fn call_gemini( pub async fn call_gemini(
api_key: String, api_key: String,
mode: String,
history: Vec<ThreadMessage>, history: Vec<ThreadMessage>,
params: GeminiCallParams, user_text: Option<String>,
user_image_base64: Option<String>,
user_image_mime: Option<String>,
) -> Result<(Vec<MessagePart>, f64), String> { ) -> Result<(Vec<MessagePart>, f64), String> {
let client = reqwest::Client::new(); let client = reqwest::Client::new();
let GeminiCallParams {
mode,
aspect_ratio,
image_size,
user_text,
user_image_base64,
user_image_mime,
} = params;
let is_first_message = history.is_empty(); let is_first_message = history.is_empty();
let mut contents: Vec<Value> = history let mut contents: Vec<Value> = history
@@ -182,11 +156,7 @@ pub async fn call_gemini(
contents.push(json!({"role": "user", "parts": user_parts})); contents.push(json!({"role": "user", "parts": user_parts}));
let generation_config = build_generation_config( let generation_config = build_generation_config(mode.as_str());
mode.as_str(),
aspect_ratio.as_deref(),
image_size.as_str(),
);
let safety_settings = build_safety_settings(); let safety_settings = build_safety_settings();
let request_body = json!({ let request_body = json!({
@@ -278,13 +248,8 @@ pub async fn call_gemini(
let candidates_tokens = usage["candidatesTokenCount"].as_u64().unwrap_or(0); let candidates_tokens = usage["candidatesTokenCount"].as_u64().unwrap_or(0);
let image_part_count = result_parts.iter().filter(|p| p.part_type == "image").count() as u64; let image_part_count = result_parts.iter().filter(|p| p.part_type == "image").count() as u64;
// Image output tokens per image vary by resolution, billed at $120/1M tokens // Image output tokens (4K = 2000 tokens each) billed at $120/1M tokens
let tokens_per_image: u64 = match image_size.as_str() { let image_output_tokens = image_part_count * 2_000_u64;
"1K" => 500,
"2K" => 1_000,
_ => 2_000, // 4K default
};
let image_output_tokens = image_part_count * tokens_per_image;
// Remaining candidates tokens are text/thinking, billed at $12/1M tokens // Remaining candidates tokens are text/thinking, billed at $12/1M tokens
let text_output_tokens = candidates_tokens.saturating_sub(image_output_tokens); let text_output_tokens = candidates_tokens.saturating_sub(image_output_tokens);
+3 -17
View File
@@ -1,7 +1,7 @@
mod gemini; mod gemini;
mod storage; mod storage;
use gemini::{call_gemini, read_reference_image_base64, GeminiCallParams}; use gemini::{call_gemini, read_reference_image_base64};
use serde::Serialize; use serde::Serialize;
use storage::{ use storage::{
delete_thread_from_disk, load_config_from_disk, load_threads_from_disk, save_config_to_disk, delete_thread_from_disk, load_config_from_disk, load_threads_from_disk, save_config_to_disk,
@@ -46,30 +46,16 @@ async fn save_config(config: Config) -> Result<(), String> {
} }
#[tauri::command] #[tauri::command]
#[allow(clippy::too_many_arguments)]
async fn send_message( async fn send_message(
api_key: String, api_key: String,
mode: String, mode: String,
aspect_ratio: Option<String>,
image_size: String,
history: Vec<ThreadMessage>, history: Vec<ThreadMessage>,
user_text: Option<String>, user_text: Option<String>,
user_image_base64: Option<String>, user_image_base64: Option<String>,
user_image_mime: Option<String>, user_image_mime: Option<String>,
) -> Result<SendMessageResult, String> { ) -> Result<SendMessageResult, String> {
let (parts, cost_usd) = call_gemini( let (parts, cost_usd) =
api_key, call_gemini(api_key, mode, history, user_text, user_image_base64, user_image_mime).await?;
history,
GeminiCallParams {
mode,
aspect_ratio,
image_size,
user_text,
user_image_base64,
user_image_mime,
},
)
.await?;
Ok(SendMessageResult { parts, cost_usd }) Ok(SendMessageResult { parts, cost_usd })
} }
-8
View File
@@ -25,19 +25,11 @@ pub struct ThreadMessage {
pub cost_usd: Option<f64>, pub cost_usd: Option<f64>,
} }
fn default_image_size() -> String {
"4K".to_string()
}
#[derive(Debug, Clone, Serialize, Deserialize)] #[derive(Debug, Clone, Serialize, Deserialize)]
pub struct Thread { pub struct Thread {
pub id: String, pub id: String,
pub name: String, pub name: String,
pub mode: String, pub mode: String,
#[serde(rename = "aspectRatio", skip_serializing_if = "Option::is_none")]
pub aspect_ratio: Option<String>,
#[serde(rename = "imageSize", default = "default_image_size")]
pub image_size: String,
pub messages: Vec<ThreadMessage>, pub messages: Vec<ThreadMessage>,
#[serde(rename = "createdAt")] #[serde(rename = "createdAt")]
pub created_at: i64, pub created_at: i64,
+2 -16
View File
@@ -16,14 +16,7 @@ import { SettingsModal } from "./components/settingsModal.tsx";
import { Sidebar } from "./components/sidebar.tsx"; import { Sidebar } from "./components/sidebar.tsx";
import { ThreadView } from "./components/threadView.tsx"; import { ThreadView } from "./components/threadView.tsx";
import { WelcomeScreen } from "./components/welcomeScreen.tsx"; import { WelcomeScreen } from "./components/welcomeScreen.tsx";
import type { import type { Config, Mode, PendingInput, Thread } from "./types/index.ts";
AspectRatio,
Config,
ImageSize,
Mode,
PendingInput,
Thread,
} from "./types/index.ts";
const generateThreadName = (mode: Mode, text?: string): string => { const generateThreadName = (mode: Mode, text?: string): string => {
if ( if (
@@ -127,18 +120,11 @@ const app = (): JSX.Element => {
}); });
const handleNewThread = useCallback( const handleNewThread = useCallback(
( (mode: Mode): void => {
mode: Mode,
aspectRatio: AspectRatio | undefined,
imageSize: ImageSize,
): void => {
const now = Date.now(); const now = Date.now();
const createdThread: Thread = { const createdThread: Thread = {
/* eslint-disable-next-line stylistic/no-extra-parens -- Required for conditional spread with exactOptionalPropertyTypes */
...(aspectRatio !== undefined && { aspectRatio }),
createdAt: now, createdAt: now,
id: generateId(), id: generateId(),
imageSize: imageSize,
messages: [], messages: [],
mode: mode, mode: mode,
name: `New ${mode} thread`, name: `New ${mode} thread`,
+40 -68
View File
@@ -19,12 +19,7 @@ import {
type JSX, type JSX,
type KeyboardEvent, type KeyboardEvent,
} from "react"; } from "react";
import type { import type { Mode, PendingInput } from "../types/index.ts";
AspectRatio,
ImageSize,
Mode,
PendingInput,
} from "../types/index.ts";
const dropZoneBaseClass = [ const dropZoneBaseClass = [
"border-2 border-dashed rounded-xl p-8", "border-2 border-dashed rounded-xl p-8",
@@ -118,19 +113,14 @@ const readClipboardImage = async(
onFileRead(new File([ blob ], "clipboard.png", { type: imageType })); onFileRead(new File([ blob ], "clipboard.png", { type: imageType }));
}; };
const modeLabelText = ( const modeLabelText = (mode: Mode): string => {
mode: Mode,
aspectRatio: AspectRatio | undefined,
imageSize: ImageSize,
): string => {
if (mode === "avatar") { if (mode === "avatar") {
return `🟣 Avatar Mode · ${imageSize}`; return "🟣 Avatar Mode (1:1)";
} }
if (mode === "art") { if (mode === "art") {
const ratio = aspectRatio ?? "16:9"; return "🩷 Art Mode (16:9)";
return `🩷 Art Mode (${ratio}) · ${imageSize}`;
} }
return `🔵 Replace Mode · ${imageSize}`; return "🔵 Replace Mode";
}; };
type OnSendCallback = ( type OnSendCallback = (
@@ -140,9 +130,7 @@ type OnSendCallback = (
)=> void; )=> void;
interface InputAreaProperties { interface InputAreaProperties {
readonly aspectRatio?: AspectRatio;
readonly hasMessages: boolean; readonly hasMessages: boolean;
readonly imageSize: ImageSize;
readonly initialImageBase64?: string; readonly initialImageBase64?: string;
readonly initialImageMime?: string; readonly initialImageMime?: string;
readonly initialImagePreview?: string; readonly initialImagePreview?: string;
@@ -156,9 +144,7 @@ interface InputAreaProperties {
/** /**
* Renders the input area for composing and sending messages. * Renders the input area for composing and sending messages.
* @param props - The component props. * @param props - The component props.
* @param props.aspectRatio - The thread's aspect ratio setting (Art mode only).
* @param props.hasMessages - Whether the thread already has messages (affects replace mode UI). * @param props.hasMessages - Whether the thread already has messages (affects replace mode UI).
* @param props.imageSize - The thread's resolution setting.
* @param props.initialImageBase64 - Initial base64 image data to pre-populate. * @param props.initialImageBase64 - Initial base64 image data to pre-populate.
* @param props.initialImageMime - Initial image MIME type to pre-populate. * @param props.initialImageMime - Initial image MIME type to pre-populate.
* @param props.initialImagePreview - Initial image preview URL to pre-populate. * @param props.initialImagePreview - Initial image preview URL to pre-populate.
@@ -170,9 +156,7 @@ interface InputAreaProperties {
* @returns The JSX element. * @returns The JSX element.
*/ */
const inputArea = ({ const inputArea = ({
aspectRatio,
hasMessages, hasMessages,
imageSize,
initialImageBase64, initialImageBase64,
initialImageMime, initialImageMime,
initialImagePreview, initialImagePreview,
@@ -272,8 +256,7 @@ const inputArea = ({
if (isInitialReplace && imageBase64 === undefined) { if (isInitialReplace && imageBase64 === undefined) {
return; return;
} }
const hasContent = text.trim().length > 0 || imageBase64 !== undefined; if (!isInitialReplace && text.trim().length === 0) {
if (!isInitialReplace && !hasContent) {
return; return;
} }
@@ -349,14 +332,11 @@ const inputArea = ({
: dropZoneInactiveClass, : dropZoneInactiveClass,
].join(" "); ].join(" ");
const hasNoContent = text.trim().length === 0 && imageBase64 === undefined;
const isSendDisabled = isLoading || hasNoContent;
return ( return (
<div className="border-t border-purple-900/30 p-4 bg-[#0f0a1a]"> <div className="border-t border-purple-900/30 p-4 bg-[#0f0a1a]">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<span className="text-xs text-gray-500 uppercase tracking-wider"> <span className="text-xs text-gray-500 uppercase tracking-wider">
{modeLabelText(mode, aspectRatio, imageSize)} {modeLabelText(mode)}
</span> </span>
</div> </div>
@@ -417,15 +397,6 @@ const inputArea = ({
type="file" type="file"
/> />
<textarea
className={textareaClass}
disabled={isLoading}
onChange={handleTextChange}
placeholder="Add notes to include with the image (optional)..."
rows={2}
value={text}
/>
<button <button
className={replaceButtonClass} className={replaceButtonClass}
disabled={isLoading || imageBase64 === undefined} disabled={isLoading || imageBase64 === undefined}
@@ -443,40 +414,41 @@ const inputArea = ({
</div> </div>
: <div className="flex flex-col gap-3"> : <div className="flex flex-col gap-3">
<div className="flex flex-col gap-2"> {mode === "replace"
{imagePreview === undefined ? <div className="flex flex-col gap-2">
? <button {imagePreview === undefined
className={pasteButtonClass} ? <button
onClick={handlePasteButtonClick} className={pasteButtonClass}
type="button" onClick={handlePasteButtonClick}
>
{mode === "replace"
? "📋 Paste replacement image (optional)"
: "📋 Paste image (optional)"}
</button>
: <div className="relative inline-block">
<img
alt="Upload preview"
className="max-h-32 rounded-lg border border-purple-700/40"
src={imagePreview}
/>
<button
className={clearButtonClass}
onClick={clearImage}
type="button" type="button"
> >
{"×"} {"📋 Paste replacement image (optional)"}
</button> </button>
</div>}
<input : <div className="relative inline-block">
accept="image/*" <img
className="hidden" alt="Upload preview"
onChange={handleFileChange} className="max-h-32 rounded-lg border border-purple-700/40"
ref={fileInputReference} src={imagePreview}
type="file" />
/> <button
</div> className={clearButtonClass}
onClick={clearImage}
type="button"
>
{"×"}
</button>
</div>}
<input
accept="image/*"
className="hidden"
onChange={handleFileChange}
ref={fileInputReference}
type="file"
/>
</div>
: null}
<div className="flex gap-3 items-end"> <div className="flex gap-3 items-end">
<textarea <textarea
@@ -492,7 +464,7 @@ const inputArea = ({
/> />
<button <button
className={sendButtonClass} className={sendButtonClass}
disabled={isSendDisabled} disabled={isLoading || text.trim().length === 0}
onClick={handleSend} onClick={handleSend}
type="button" type="button"
> >
+10 -267
View File
@@ -1,18 +1,12 @@
/** /**
* @file Modal for selecting a new thread generation mode and options. * @file Modal for selecting a new thread generation mode.
* @copyright Naomi Carrigan * @copyright Naomi Carrigan
* @license Naomi's Public License * @license Naomi's Public License
* @author Naomi Carrigan * @author Naomi Carrigan
*/ */
/* eslint-disable max-lines-per-function -- Component JSX inherently requires many lines */ /* eslint-disable max-lines-per-function -- Component JSX inherently requires many lines */
/* eslint-disable max-lines -- Two-step modal requires many option definitions */ import { useCallback, type JSX, type MouseEvent } from "react";
import { import type { Mode } from "../types/index.ts";
useCallback,
useState,
type JSX,
type MouseEvent,
} from "react";
import type { AspectRatio, ImageSize, Mode } from "../types/index.ts";
interface ModeOption { interface ModeOption {
colour: string; colour: string;
@@ -22,25 +16,14 @@ interface ModeOption {
mode: Mode; mode: Mode;
} }
interface AspectRatioOption {
label: string;
value: AspectRatio;
}
interface ImageSizeOption {
description: string;
label: string;
value: ImageSize;
}
const avatarDescription = [ const avatarDescription = [
"Generate a square 1:1 portrait.", "Generate a square 1:1 portrait.",
"Perfect for profile pictures and avatars.", "Perfect for profile pictures and avatars.",
].join(" "); ].join(" ");
const artDescription = [ const artDescription = [
"Generate landscape or portrait artwork.", "Generate wide 16:9 landscape artwork.",
"Choose your aspect ratio and resolution.", "Great for wallpapers and banners.",
].join(" "); ].join(" ");
const replaceDescription = [ const replaceDescription = [
@@ -72,21 +55,6 @@ const modeOptionList: Array<ModeOption> = [
}, },
]; ];
const aspectRatioOptions: Array<AspectRatioOption> = [
{ label: "1:1 Square", value: "1:1" },
{ label: "4:3 Standard", value: "4:3" },
{ label: "3:4 Portrait", value: "3:4" },
{ label: "16:9 Widescreen", value: "16:9" },
{ label: "9:16 Wallpaper", value: "9:16" },
{ label: "21:9 Ultrawide", value: "21:9" },
];
const imageSizeOptions: Array<ImageSizeOption> = [
{ description: "Faster, cheaper", label: "1K", value: "1K" },
{ description: "Balanced", label: "2K", value: "2K" },
{ description: "Best quality", label: "4K", value: "4K" },
];
const colourMap: Record< const colourMap: Record<
string, string,
{ badge: string; button: string; hover: string } { badge: string; button: string; hover: string }
@@ -114,20 +82,6 @@ const isMode = (value: string): value is Mode => {
return validModesSet.has(value); return validModesSet.has(value);
}; };
const validAspectRatios = new Set<string>([
"1:1", "3:4", "4:3", "9:16", "16:9", "21:9",
]);
const isAspectRatio = (value: string): value is AspectRatio => {
return validAspectRatios.has(value);
};
const validImageSizes = new Set<string>([ "1K", "2K", "4K" ]);
const isImageSize = (value: string): value is ImageSize => {
return validImageSizes.has(value);
};
const overlayClass = [ const overlayClass = [
"fixed inset-0 bg-black/70 backdrop-blur-sm", "fixed inset-0 bg-black/70 backdrop-blur-sm",
"flex items-center justify-center z-50", "flex items-center justify-center z-50",
@@ -139,243 +93,32 @@ const panelClass = [
"shadow-2xl shadow-purple-900/30", "shadow-2xl shadow-purple-900/30",
].join(" "); ].join(" ");
const pillBaseClass = [
"px-4 py-2 rounded-xl border text-sm font-medium",
"transition-all duration-200 cursor-pointer",
].join(" ");
const pillActiveClass = "border-purple-500 bg-purple-600/30 text-white";
const pillInactiveClass = [
"border-purple-900/40 bg-transparent text-gray-400",
"hover:border-purple-500/60 hover:text-gray-200",
].join(" ");
const startButtonClass = [
"w-full bg-gradient-to-r from-purple-600 to-pink-600",
"hover:from-purple-500 hover:to-pink-500",
"text-white font-semibold py-3 rounded-xl",
"transition-all duration-200 mt-2",
].join(" ");
const sizeButtonActiveClass = "border-purple-500 bg-purple-600/30 text-white";
const sizeButtonInactiveClass = [
"border-purple-900/40 bg-transparent text-gray-400",
"hover:border-purple-500/60 hover:text-gray-200",
].join(" ");
const backButtonClass = [
"text-gray-400 hover:text-white",
"transition-colors text-xl",
].join(" ");
const sectionLabelClass = [
"text-sm text-gray-400",
"uppercase tracking-wider mb-3",
].join(" ");
interface NewThreadModalProperties { interface NewThreadModalProperties {
readonly onClose: ()=> void; readonly onClose: ()=> void;
readonly onSelect: ( readonly onSelect: (mode: Mode)=> void;
mode: Mode,
aspectRatio: AspectRatio | undefined,
imageSize: ImageSize,
)=> void;
} }
/** /**
* Renders the new thread modal for selecting a generation mode and options. * Renders the new thread modal for selecting a generation mode.
* @param props - The component props. * @param props - The component props.
* @param props.onClose - Callback to close the modal. * @param props.onClose - Callback to close the modal.
* @param props.onSelect - Callback when a mode and options are confirmed. * @param props.onSelect - Callback when a mode is selected.
* @returns The JSX element. * @returns The JSX element.
*/ */
const threadModal = ({ const threadModal = ({
onClose, onClose,
onSelect, onSelect,
}: NewThreadModalProperties): JSX.Element => { }: NewThreadModalProperties): JSX.Element => {
const [ step, setStep ] = useState<"mode" | "options">("mode");
const [ selectedMode, setSelectedMode ] = useState<Mode | undefined>(
undefined,
);
const [ aspectRatio, setAspectRatio ] = useState<AspectRatio>("16:9");
const [ imageSize, setImageSize ] = useState<ImageSize>("4K");
const handleModeSelect = useCallback( const handleModeSelect = useCallback(
(event: MouseEvent<HTMLButtonElement>): void => { (event: MouseEvent<HTMLButtonElement>): void => {
const rawMode = event.currentTarget.dataset.mode; const rawMode = event.currentTarget.dataset.mode;
if (rawMode !== undefined && isMode(rawMode)) { if (rawMode !== undefined && isMode(rawMode)) {
setSelectedMode(rawMode); onSelect(rawMode);
setStep("options");
} }
}, },
[], [ onSelect ],
); );
const handleBack = useCallback((): void => {
setStep("mode");
}, []);
const handleStart = useCallback((): void => {
if (selectedMode === undefined) {
return;
}
const ratio = selectedMode === "art"
? aspectRatio
: undefined;
onSelect(selectedMode, ratio, imageSize);
}, [ selectedMode, aspectRatio, imageSize, onSelect ]);
const handleAspectRatioSelect = useCallback(
(event: MouseEvent<HTMLButtonElement>): void => {
const rawRatio = event.currentTarget.dataset.ratio;
if (rawRatio !== undefined && isAspectRatio(rawRatio)) {
setAspectRatio(rawRatio);
}
},
[],
);
const handleImageSizeSelect = useCallback(
(event: MouseEvent<HTMLButtonElement>): void => {
const rawSize = event.currentTarget.dataset.size;
if (rawSize !== undefined && isImageSize(rawSize)) {
setImageSize(rawSize);
}
},
[],
);
const selectedModeOption = modeOptionList.find((o) => {
return o.mode === selectedMode;
});
const selectedColours = selectedModeOption === undefined
? colourMap.purple
: colourMap[selectedModeOption.colour];
if (step === "options" && selectedModeOption !== undefined) {
return (
<div className={overlayClass}>
<div className={panelClass}>
<div className="flex items-center gap-3 mb-6">
<button
className={backButtonClass}
onClick={handleBack}
type="button"
>
{"←"}
</button>
<h2 className="text-2xl font-bold text-white flex-1">
{"Configure Thread"}
</h2>
<button
className="text-gray-400 hover:text-white transition-colors"
onClick={onClose}
type="button"
>
{"×"}
</button>
</div>
<div
className={[
"flex items-center gap-3 mb-6 p-4",
"rounded-xl bg-[#241836] border border-purple-900/30",
].join(" ")}
>
<span className="text-3xl">{selectedModeOption.icon}</span>
<div>
<div className="flex items-center gap-2">
<span className="text-white font-semibold">
{selectedModeOption.label}
</span>
<span
className={`text-xs px-2 py-0.5 rounded-full ${selectedColours?.badge ?? ""}`}
>
{selectedModeOption.mode}
</span>
</div>
<p className="text-gray-400 text-xs mt-0.5">
{selectedModeOption.description}
</p>
</div>
</div>
{selectedMode === "art"
? <div className="mb-6">
<p className={sectionLabelClass}>
{"Aspect Ratio"}
</p>
<div className="flex flex-wrap gap-2">
{aspectRatioOptions.map((option) => {
const pillClass = [
pillBaseClass,
aspectRatio === option.value
? pillActiveClass
: pillInactiveClass,
].join(" ");
return (
<button
className={pillClass}
data-ratio={option.value}
key={option.value}
onClick={handleAspectRatioSelect}
type="button"
>
{option.label}
</button>
);
})}
</div>
</div>
: null}
<div className="mb-6">
<p className={sectionLabelClass}>
{"Resolution"}
</p>
<div className="flex gap-3">
{imageSizeOptions.map((option) => {
const sizeClass = [
"flex-1 flex flex-col items-center py-3 px-2",
"rounded-xl border text-sm font-medium",
"transition-all duration-200 cursor-pointer",
imageSize === option.value
? sizeButtonActiveClass
: sizeButtonInactiveClass,
].join(" ");
return (
<button
className={sizeClass}
data-size={option.value}
key={option.value}
onClick={handleImageSizeSelect}
type="button"
>
<span className="text-base font-bold">{option.label}</span>
<span className="text-xs mt-0.5 opacity-70">
{option.description}
</span>
</button>
);
})}
</div>
</div>
<button
className={startButtonClass}
onClick={handleStart}
type="button"
>
{"Start Thread →"}
</button>
</div>
</div>
);
}
return ( return (
<div className={overlayClass}> <div className={overlayClass}>
<div className={panelClass}> <div className={panelClass}>
+9 -34
View File
@@ -68,19 +68,19 @@ const modeLabel = (mode: Mode): string => {
interface BuildUserPartsOptions { interface BuildUserPartsOptions {
readonly imageBase64?: string; readonly imageBase64?: string;
readonly imageMime?: string; readonly imageMime?: string;
readonly mode: Mode;
readonly text: string; readonly text: string;
} }
const buildUserParts = ({ const buildUserParts = ({
imageBase64, imageBase64,
imageMime, imageMime,
mode,
text, text,
}: BuildUserPartsOptions): Array<MessagePart> => { }: BuildUserPartsOptions): Array<MessagePart> => {
const userParts: Array<MessagePart> = []; const userParts: Array<MessagePart> = [];
if (imageBase64 === undefined) { if (mode === "replace" && imageBase64 !== undefined) {
userParts.push({ text: text, type: "text" });
} else {
userParts.push({ userParts.push({
imageData: imageBase64, imageData: imageBase64,
mimeType: imageMime ?? "image/png", mimeType: imageMime ?? "image/png",
@@ -89,6 +89,8 @@ const buildUserParts = ({
if (text.length > 0) { if (text.length > 0) {
userParts.push({ text: text, type: "text" }); userParts.push({ text: text, type: "text" });
} }
} else {
userParts.push({ text: text, type: "text" });
} }
return userParts; return userParts;
@@ -172,18 +174,13 @@ const threadView = ({
onLoadingChange(true); onLoadingChange(true);
onErrorChange(undefined); onErrorChange(undefined);
const { const { messages, mode } = thread;
aspectRatio,
imageSize: rawImageSize,
messages,
mode,
} = thread;
const imageSize = rawImageSize ?? "4K";
const userParts = buildUserParts({ const userParts = buildUserParts({
/* eslint-disable-next-line stylistic/no-extra-parens -- Required for conditional spread with exactOptionalPropertyTypes */ /* eslint-disable-next-line stylistic/no-extra-parens -- Required for conditional spread with exactOptionalPropertyTypes */
...(imageBase64 !== undefined && { imageBase64 }), ...(imageBase64 !== undefined && { imageBase64 }),
/* eslint-disable-next-line stylistic/no-extra-parens -- Required for conditional spread with exactOptionalPropertyTypes */ /* eslint-disable-next-line stylistic/no-extra-parens -- Required for conditional spread with exactOptionalPropertyTypes */
...(imageMime !== undefined && { imageMime }), ...(imageMime !== undefined && { imageMime }),
mode,
text, text,
}); });
@@ -220,9 +217,7 @@ const threadView = ({
"send_message", "send_message",
{ {
apiKey, apiKey,
aspectRatio,
history, history,
imageSize,
mode, mode,
userImageBase64, userImageBase64,
userImageMime, userImageMime,
@@ -258,13 +253,7 @@ const threadView = ({
const handleRetry = useCallback( const handleRetry = useCallback(
(modelMessageIndex: number): void => { (modelMessageIndex: number): void => {
const { const { messages, mode } = thread;
aspectRatio,
imageSize: rawImageSize,
messages,
mode,
} = thread;
const imageSize = rawImageSize ?? "4K";
const userMessageIndex = modelMessageIndex - 1; const userMessageIndex = modelMessageIndex - 1;
const userMessage = messages[userMessageIndex]; const userMessage = messages[userMessageIndex];
@@ -311,9 +300,7 @@ const threadView = ({
} }
const response = await invoke<SendResult>("send_message", { const response = await invoke<SendResult>("send_message", {
apiKey, apiKey,
aspectRatio,
history, history,
imageSize,
mode, mode,
userImageBase64, userImageBase64,
userImageMime, userImageMime,
@@ -366,13 +353,7 @@ const threadView = ({
const handleEditCommit = useCallback( const handleEditCommit = useCallback(
(messageIndex: number, editedText: string): void => { (messageIndex: number, editedText: string): void => {
const { const { messages, mode } = thread;
aspectRatio,
imageSize: rawImageSize,
messages,
mode,
} = thread;
const imageSize = rawImageSize ?? "4K";
const originalMessage = messages[messageIndex]; const originalMessage = messages[messageIndex];
if (originalMessage === undefined) { if (originalMessage === undefined) {
return; return;
@@ -423,9 +404,7 @@ const threadView = ({
} }
const response = await invoke<SendResult>("send_message", { const response = await invoke<SendResult>("send_message", {
apiKey, apiKey,
aspectRatio,
history, history,
imageSize,
mode, mode,
userImageBase64, userImageBase64,
userImageMime, userImageMime,
@@ -557,11 +536,7 @@ const threadView = ({
{...(pendingInput?.text !== undefined && { {...(pendingInput?.text !== undefined && {
initialText: pendingInput.text, initialText: pendingInput.text,
})} })}
{...(thread.aspectRatio !== undefined && {
aspectRatio: thread.aspectRatio,
})}
hasMessages={thread.messages.length > 0} hasMessages={thread.messages.length > 0}
imageSize={thread.imageSize ?? "4K"}
isLoading={isLoading} isLoading={isLoading}
mode={thread.mode} mode={thread.mode}
onInputChange={onPendingInputChange} onInputChange={onPendingInputChange}
+7 -20
View File
@@ -5,8 +5,6 @@
* @author Naomi Carrigan * @author Naomi Carrigan
*/ */
type AspectRatio = "1:1" | "3:4" | "4:3" | "9:16" | "16:9" | "21:9";
type ImageSize = "1K" | "2K" | "4K";
type Mode = "avatar" | "art" | "replace"; type Mode = "avatar" | "art" | "replace";
interface Config { interface Config {
@@ -35,23 +33,12 @@ interface ThreadMessage {
} }
interface Thread { interface Thread {
aspectRatio?: AspectRatio; createdAt: number;
createdAt: number; id: string;
id: string; messages: Array<ThreadMessage>;
imageSize?: ImageSize; mode: Mode;
messages: Array<ThreadMessage>; name: string;
mode: Mode; updatedAt: number;
name: string;
updatedAt: number;
} }
export type { export type { Config, MessagePart, Mode, PendingInput, Thread, ThreadMessage };
AspectRatio,
Config,
ImageSize,
MessagePart,
Mode,
PendingInput,
Thread,
ThreadMessage,
};