ClutterSloth: Sorting 5 messy files took me 12 minutes of procrastination, so now a local browser loop does it while I nap

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady

What I Built

ClutterSloth is a zero-dependency, local-first file and inbox tidier that organizes chaotic filenames (invoice_v1(1).pdf, Q4_meeting_notes_FINAL-final.docx, IMG_8842 copy.jpg) into clean, structured categories without sending a single byte over the network.
• Live Deployed Prototype: https://pug-tape-64702791.figma.site/
• The Core Rule: 0 bytes leave this browser. The sorting loop runs client-side, proving that you do not need heavy cloud infrastructure or expensive proprietary LLM APIs to automate everyday digital annoyance.

Demo

A walkthrough of the live interface: inputting messy filenames into the left control panel, toggling Local RAM Mode (Offline), and executing the client-side sort loop to populate structured folder outputs.
• ClutterSloth Live Prototype

Code

You can inspect and fork the interface architecture directly via the Figma Make Prototype Source or embed the client-side classification loop:
// ClutterSloth Client-Side Sort Loop
function runClutterSloth(rawInput) {
const lines = rawInput.split('\n').map(l => l.trim()).filter(Boolean);
return lines.map(filename => {
const lower = filename.toLowerCase();
if (lower.includes('invoice') || lower.includes('pdf')) {
return { original: filename, folder: '📁 /Finance_Receipts', action: 'Standardized nomenclature' };
} else if (lower.includes('note') || lower.includes('doc')) {
return { original: filename, folder: '📝 /Work_Notes', action: 'Tagged [Offline-Summary]' };
} else if (lower.includes('img') || lower.includes('jpg') || lower.includes('mov')) {
return { original: filename, folder: '🖼️ /Media_Cleanup', action: 'Queued 30-day auto-archive' };
} else if (lower.includes('unsubscribe') || lower.includes('eml') || lower.includes('free_gift')) {
return { original: filename, folder: '🗑️ /Trash_Bin', action: 'Marked for local purge' };
}
return { original: filename, folder: '📂 /Archive/Unsorted', action: 'Cleaned filename' };
});
}

How I Built It

As a first-year student working solo with a zero-dollar cloud budget, I designed ClutterSloth around a minimalist single-page layout:

1. Input & Control Panel: A clean dark-mode (#0F172A) textarea pre-loaded with sample desktop and inbox clutter, paired with an interactive Local RAM Mode (Offline) indicator showing an open model loaded directly in memory.
2. Deterministic State Transition: Clicking Run Local AI Sort Loop transitions the right structured output panel from Awaiting Run to categorized folder groups (/Finance_Receipts, /Work_Notes, /Media_Cleanup, /Trash_Bin).
3. Responsive Auto Layout: Built with fluid flex constraints that stack cleanly from a 2-column desktop workspace into a mobile-friendly vertical flow.

Why Does Open Innovation Matter?

1. Client-side privacy: Your filenames and inbox subjects stay strictly inside your browser tab and never touch a remote server, eliminating third-party data exposure.
2. Zero-cost sustainability: Removing recurring API subscription fees makes practical automation accessible to students, classrooms, and offline environments.
3. Rule-based efficiency: Small, inspectable logic loops are fast, deterministic, and easy for any developer to audit and extend.

My Agent Session

• Session Workflow: Prototyped and iterated via interactive text-to-code design loops, validating offline state transitions and zero-network privacy constraints.

The Lazy Payoff

By replacing manual renaming with a single-click local loop, ClutterSloth turns a 12-minute weekly desktop cleanup chore into a 0-second background habit—leaving more time to actually sleep or code.

Comments

[Oleksandr]

Love the local-first, zero-dependency approach! It’s a great project for a first-year student, and the privacy angle is spot on.

Two bits of constructive feedback on the code:

The "AI" part: The provided runClutterSloth loop is pure deterministic logic (if/else and .includes()), not a generative model. If you actually want to run a tiny LLM locally in the browser to classify files, check out WebLLM or ONNX Runtime Web.

Keyword overlap: If a file is named invoice_scan.jpg, it will trigger the first if statement and get sent to /Finance_Receipts instead of /Media_Cleanup. You might want to handle priority or multiple tags!

Awesome job keeping it entirely client-side. Good luck with the Hacktoberfest submission! 🦥