AOSSIE-Org / AOSSIE-Org/PictoPy

Feat: Add Smart Search Bar with Voice Search Button for Quick Navigation

Open
#627 4 comments 0 reactions 1 assignee Claimed by @ParikhShreya View on GitHub
enhancement frontend
Dominant language
Python
Stars
283
Forks
679
Avg merge
7d 2h
Merged PRs (30d)
3

Description

## 🎤 Add Smart Search Bar with Voice Search Button for Quick Navigation

### Overview
Currently, PictoPy users manually browse through the sidebar to access features like **AI Tagging**, **Videos**, or **Albums**.
Adding a **Smart Search Bar** with a small **microphone button** will make it easier for users to quickly find and open sections or search their uploaded images.

This enhancement will improve accessibility, enhance user experience, and give a modern, interactive touch to the PictoPy interface.

### Goals
- Simplify navigation across different pages.
- Allow users to search images, tags, or pages directly.
- Provide the foundation for future voice-based controls.

### Feature Details

#### 🔹 Smart Search Bar
- Positioned at the top navigation bar or header area.
- Accepts text input to search for:
- Image names or tags
- Pages like “AI Tagging”, “Videos”, “Albums”, etc.
- Optionally displays dropdown results.

#### 🔹 Voice Search Button
- Small **microphone icon** (`` or Lucide icon) inside or next to the search bar.
- On click → activates basic browser speech recognition (`SpeechRecognition` API).
- Converts the voice input into text within the search field (no heavy AI processing).

### Implementation Plan
1. Create a new `SearchBar` component.
2. Add an input field with a placeholder like `"Search images or pages..."`.
3. Include a microphone icon button next to the field.
4. Implement simple voice-to-text using the Web Speech API.

### ✅ Expected Outcome
- Clean and fast navigation experience.
- Convenient for users who prefer voice interaction.
- Visually modern UI improvement that fits PictoPy’s theme.
- Provides a base for future smart/AI search features.

### Next Steps
If approved, I will open a PR that:
- Adds the new **Search Bar** component.
- Includes a **microphone button** for basic speech input.
- Maintains consistency with existing PictoPy UI and design standards.

### Add ScreenShots

Image

### Record

- [x] I agree to follow this project's Code of Conduct
- [x] I want to work on this issue

### Checklist before Submitting.

- [x] Have you updated docs for it?.
- [ ] Have you added unit tests?.
- [ ] Have you made sure unit tests pass?
- [x] Have you made sure code formatting is correct?
- [ ] Does it contain any style related issues?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.