AOSSIE-Org / AOSSIE-Org/PictoPy

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

Đang mở
#627 4 bình luận 0 reaction 1 người được giao Được @ParikhShreya nhận Xem trên GitHub
enhancement frontend
Ngôn ngữ chính
Python
Star
283
Fork
679
Merge trung bình
7 ngày 2 giờ
Pull request đã merge (30 ngày)
3

Mô tả

## 🎤 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?

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.