{"id":24761617,"url":"https://github.com/kedhareswer/mlgenefunction","last_synced_at":"2026-05-10T09:41:28.990Z","repository":{"id":262213646,"uuid":"864078954","full_name":"Kedhareswer/MLGeneFunction","owner":"Kedhareswer","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-13T09:18:51.000Z","size":4960,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-28T19:18:24.414Z","etag":null,"topics":["css","deep-neural-networks","image-processing","jupyter-notebook","machine-learning","python"],"latest_commit_sha":null,"homepage":"https://kedhareswer.github.io/MLGeneFunction/","language":"Jupyter Notebook","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kedhareswer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-27T13:02:34.000Z","updated_at":"2025-01-13T09:18:54.000Z","dependencies_parsed_at":"2024-11-11T08:37:28.774Z","dependency_job_id":null,"html_url":"https://github.com/Kedhareswer/MLGeneFunction","commit_stats":null,"previous_names":["kedhareswer/mlgenefunction"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kedhareswer%2FMLGeneFunction","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kedhareswer%2FMLGeneFunction/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kedhareswer%2FMLGeneFunction/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kedhareswer%2FMLGeneFunction/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kedhareswer","download_url":"https://codeload.github.com/Kedhareswer/MLGeneFunction/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245104528,"owners_count":20561380,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","deep-neural-networks","image-processing","jupyter-notebook","machine-learning","python"],"created_at":"2025-01-28T19:18:25.997Z","updated_at":"2026-05-10T09:41:28.979Z","avatar_url":"https://github.com/Kedhareswer.png","language":"Jupyter Notebook","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Image to Sketch Converter\n\n\u003cdiv align=\"center\"\u003e\n\n![Next.js](https://img.shields.io/badge/Next.js-15.2.4-black?style=for-the-badge\u0026logo=next.js)\n![React](https://img.shields.io/badge/React-19-blue?style=for-the-badge\u0026logo=react)\n![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?style=for-the-badge\u0026logo=typescript)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.4.17-38B2AC?style=for-the-badge\u0026logo=tailwind-css)\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](LICENSE)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge)](http://makeapullrequest.com)\n\n\u003c/div\u003e\n\n## 📝 Table of Contents\n- [Overview](#overview)\n- [Features](#features)\n- [Architecture](#architecture)\n- [Tech Stack](#tech-stack)\n- [Getting Started](#getting-started)\n- [Project Structure](#project-structure)\n- [Components](#components)\n- [API Documentation](#api-documentation)\n- [Performance Metrics](#performance-metrics)\n- [Development](#development)\n- [Contributing](#contributing)\n- [License](#license)\n\n## 🎯 Overview\nImage to Sketch Converter is a modern web application that transforms regular images into artistic sketches. Built with Next.js and React, it provides a seamless user experience for image conversion with real-time processing and privacy-focused client-side operations.\n\n### Key Benefits\n- 🎨 Transform photos into artistic sketches instantly\n- 🚀 Real-time processing with immediate feedback\n- 🎯 Precise control over conversion parameters\n- 📱 Cross-platform compatibility\n- 🔒 Privacy-focused (all processing done client-side)\n\n## ✨ Features\n\n### Core Features\n- 🖼️ **Image to Sketch Conversion**\n  - Multiple sketch styles\n  - Adjustable intensity levels\n  - Real-time preview\n  - Batch processing support\n\n- 🔄 **Image Comparison**\n  - Side-by-side view\n  - Slider comparison\n  - Before/After toggle\n  - Zoom and pan capabilities\n\n- 🎨 **Customization Options**\n  - Edge detection sensitivity\n  - Contrast adjustment\n  - Noise reduction\n  - Color preservation options\n\n### User Experience\n- 📱 **Responsive Design**\n  - Mobile-first approach\n  - Touch-friendly interface\n  - Adaptive layouts\n  - Cross-browser compatibility\n\n- 🌓 **Theme Support**\n  - Dark/Light mode\n  - Custom theme options\n  - System preference detection\n  - Smooth transitions\n\n- 🔍 **Advanced Tools**\n  - Area selection\n  - Selective conversion\n  - Multiple export formats\n  - Batch processing\n\n## 🏗️ Architecture\n\n### System Architecture\n```mermaid\ngraph TD\n    A[Client Browser] --\u003e B[Next.js App]\n    B --\u003e C[React Components]\n    C --\u003e D[Image Processing]\n    D --\u003e E[Canvas API]\n    D --\u003e F[Web Workers]\n    B --\u003e G[State Management]\n    B --\u003e H[API Routes]\n    H --\u003e I[External Services]\n```\n\n### Data Flow\n```mermaid\nsequenceDiagram\n    participant User\n    participant UI\n    participant Processor\n    participant Canvas\n    participant Storage\n\n    User-\u003e\u003eUI: Upload Image\n    UI-\u003e\u003eProcessor: Process Request\n    Processor-\u003e\u003eCanvas: Apply Effects\n    Canvas-\u003e\u003eUI: Update Preview\n    UI-\u003e\u003eStorage: Save Result\n    Storage-\u003e\u003eUser: Download\n```\n\n## 🛠️ Tech Stack\n\n### Frontend\n- **Framework**: Next.js 15.2.4\n  - Server-side rendering\n  - Static site generation\n  - API routes\n  - Image optimization\n\n- **Language**: TypeScript 5\n  - Type safety\n  - Enhanced IDE support\n  - Better maintainability\n\n- **UI Library**: React 19\n  - Component-based architecture\n  - Virtual DOM\n  - Hooks system\n\n### Styling \u0026 UI\n- **CSS Framework**: Tailwind CSS 3.4.17\n  - Utility-first approach\n  - Custom configuration\n  - Responsive design\n\n- **UI Components**: Radix UI\n  - Accessible components\n  - Unstyled design\n  - Custom theming\n\n### Development Tools\n- **Package Manager**: pnpm\n- **Build Tool**: Next.js\n- **Linting**: ESLint\n- **Formatting**: Prettier\n- **Testing**: Jest\n\n## 🚀 Getting Started\n\n### Prerequisites\n- Node.js (Latest LTS version)\n- pnpm (Package manager)\n- Git\n\n### Environment Setup\n1. Clone the repository:\n```bash\ngit clone https://github.com/Kedhareswer/MLGeneFunction.git\ncd MLGeneFunction\n```\n\n2. Install dependencies:\n```bash\npnpm install\n```\n\n3. Configure environment variables:\n```bash\ncp .env.example .env.local\n```\n\n4. Run the development server:\n```bash\npnpm dev\n```\n\n5. Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n## 📁 Project Structure\n```\n├── app/                    # Next.js app directory\n│   ├── about/             # About page\n│   ├── convert/           # Conversion page\n│   ├── gallery/           # Gallery page\n│   ├── layout.tsx         # Root layout\n│   └── page.tsx           # Home page\n├── components/            # React components\n│   ├── ui/               # UI components\n│   │   ├── button.tsx    # Button component\n│   │   ├── input.tsx     # Input component\n│   │   └── ...\n│   ├── area-selector.tsx # Area selection component\n│   ├── image-uploader.tsx# Image upload component\n│   └── ...\n├── public/               # Static assets\n│   ├── images/          # Image assets\n│   └── fonts/           # Font files\n├── styles/              # Global styles\n│   ├── globals.css      # Global CSS\n│   └── themes/          # Theme configurations\n├── lib/                 # Utility functions\n│   ├── utils.ts         # Helper functions\n│   └── constants.ts     # Constants\n└── hooks/              # Custom React hooks\n    ├── useImage.ts     # Image processing hook\n    └── useTheme.ts     # Theme management hook\n```\n\n## 🧩 Components\n\n### Core Components\n- **Area Selector** (`area-selector.tsx`)\n  - Interactive selection tool\n  - Multiple selection modes\n  - Real-time preview\n  - Coordinate tracking\n\n- **Image Comparison** (`image-comparison.tsx`)\n  - Slider comparison\n  - Zoom functionality\n  - Touch support\n  - Performance optimized\n\n- **Image Uploader** (`image-uploader.tsx`)\n  - Drag-and-drop support\n  - File validation\n  - Progress tracking\n  - Error handling\n\n### UI Components\n- **Progress Indicator**\n  - Animated progress bar\n  - Status messages\n  - Error states\n  - Success feedback\n\n- **Theme Provider**\n  - Theme switching\n  - Persistence\n  - System preference\n  - Custom themes\n\n## 📚 API Documentation\n\n### Image Processing API\n```typescript\ninterface ImageProcessor {\n  convertToSketch(image: File, options: SketchOptions): Promise\u003cBlob\u003e;\n  adjustParameters(params: ProcessingParams): void;\n  getPreview(): Promise\u003cstring\u003e;\n}\n```\n\n### Component Props\n```typescript\ninterface ImageUploaderProps {\n  onUpload: (file: File) =\u003e void;\n  maxSize: number;\n  allowedTypes: string[];\n  multiple?: boolean;\n}\n```\n\n## 📊 Performance Metrics\n\n### Load Time Distribution\n```mermaid\npie\n    title Page Load Time Distribution\n    \"Initial Load\" : 45\n    \"Image Processing\" : 30\n    \"UI Rendering\" : 15\n    \"API Calls\" : 10\n```\n\n### Resource Usage\n```mermaid\ngraph LR\n    A[CPU Usage] --\u003e B[Image Processing]\n    A --\u003e C[UI Updates]\n    A --\u003e D[Background Tasks]\n```\n\n## 💻 Development\n\n### Available Scripts\n```bash\n# Run development server\npnpm dev\n\n# Build for production\npnpm build\n\n# Start production server\npnpm start\n\n# Run linting\npnpm lint\n\n# Run tests\npnpm test\n\n# Generate documentation\npnpm docs\n```\n\n### Code Quality\n- ESLint configuration\n- Prettier formatting\n- TypeScript strict mode\n- Unit test coverage\n\n## 🤝 Contributing\nContributions are welcome! Please feel free to submit a Pull Request.\n\n### Development Workflow\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n### Code Style\n- Follow TypeScript best practices\n- Use functional components\n- Implement proper error handling\n- Add appropriate documentation\n\n## 📄 License\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n\u003cdiv align=\"center\"\u003e\nMade with ❤️ by Kedhareswer\n\n[![GitHub stars](https://img.shields.io/github/stars/Kedhareswer/MLGeneFunction?style=social)](https://github.com/Kedhareswer/MLGeneFunction/stargazers)\n[![GitHub forks](https://img.shields.io/github/forks/Kedhareswer/MLGeneFunction?style=social)](https://github.com/Kedhareswer/MLGeneFunction/network/members)\n[![GitHub issues](https://img.shields.io/github/issues/Kedhareswer/MLGeneFunction)](https://github.com/Kedhareswer/MLGeneFunction/issues)\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkedhareswer%2Fmlgenefunction","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkedhareswer%2Fmlgenefunction","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkedhareswer%2Fmlgenefunction/lists"}