{"id":23640636,"url":"https://github.com/aliakrem/image-processing-playground-front-end","last_synced_at":"2026-05-08T13:07:35.029Z","repository":{"id":268539558,"uuid":"899191397","full_name":"AliAkrem/image-processing-playground-front-end","owner":"AliAkrem","description":"A React-based web application that demonstrates various image processing techniques and filters. This interactive tool allows users to upload images and apply different image processing operations.","archived":false,"fork":false,"pushed_at":"2025-01-12T13:31:11.000Z","size":2350,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-12T14:35:35.082Z","etag":null,"topics":["image-processing","reactjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AliAkrem.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-12-05T19:39:47.000Z","updated_at":"2025-01-12T13:31:14.000Z","dependencies_parsed_at":"2025-01-12T14:27:56.416Z","dependency_job_id":"bf2ebb0d-8e15-40f7-8a82-f3eb2da31c56","html_url":"https://github.com/AliAkrem/image-processing-playground-front-end","commit_stats":null,"previous_names":["aliakrem/image-processing-playground"],"tags_count":0,"template":false,"template_full_name":"mantinedev/vite-min-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliAkrem%2Fimage-processing-playground-front-end","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliAkrem%2Fimage-processing-playground-front-end/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliAkrem%2Fimage-processing-playground-front-end/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AliAkrem%2Fimage-processing-playground-front-end/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AliAkrem","download_url":"https://codeload.github.com/AliAkrem/image-processing-playground-front-end/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239578879,"owners_count":19662512,"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":["image-processing","reactjs"],"created_at":"2024-12-28T09:49:54.720Z","updated_at":"2025-11-10T07:30:18.166Z","avatar_url":"https://github.com/AliAkrem.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Image Processing Playground\n\nA React-based web application that demonstrates various image processing techniques and filters. This interactive tool allows users to upload images and apply different image processing operations.\n\n\n![output](https://github.com/user-attachments/assets/a06a4b46-f71a-4725-9365-b31e2755d6f7)\n\n\n## Features\n- Noise Addition:\n  - Gaussian Noise with configurable sigma parameter\n  - Salt \u0026 Pepper Noise\n- Enhancement Filters:\n  - Dynamics reframing (v1)\n\n  \u003cimg src=\"resources/Screenshot from 2024-12-17 13-42-53.png\" /\u003e \n\n  - Contrast enhancement (v2)\n  \n  \u003cimg src=\"resources/Screenshot from 2024-12-17 13-43-19.png\"   /\u003e\n  \u003cimg src=\"resources/Screenshot from 2024-12-17 13-43-36.png\"   /\u003e\n\n- Spatial Filters:\n  - Gaussian Filter with adjustable filter size\n  - Average Filter\n  - Minimum Filter\n  - Maximum Filter\n  - Median Filter\n  - Nagao Filter\n- Edge Detection:\n  - Prewitt Edge Detection\n\n## Configuration Options\n\nThe application provides various parameters that can be adjusted:\n- Sigma value (0.0 - 1.0) for Gaussian operations\n- Filter size (odd numbers) for kernel-based operations\n- Intensity parameters (a, b) for enhancement operations\n\n## Getting Started\n\n### Installation\n\n1. Clone the repository:\n```bash\ngit clone https://github.com/aliakrem/image-processing-playground-front-end.git\ncd image-processing-playground-front-end\n```\n\n2. Install dependencies:\n```bash\nyarn install\n```\n\n3. Start the development server:\n```bash\nyarn start\n```\n\nThe application will be available at `http://localhost:3000`\n\n## Usage\n\n1. Click the \"Select Image\" button or drag and drop an image into the upload area\n2. Use the buttons on the left panel to apply different image processing operations\n3. Adjust the parameters using the input fields when available\n4. The processed image will be displayed in real-time\n\n## Tech Stack\n\n- React.js for the user interface\n- TypeScript for type-safe code\n- backend setup  [here](https://github.com/AliAkrem/image-processing-playground-back-end)\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faliakrem%2Fimage-processing-playground-front-end","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faliakrem%2Fimage-processing-playground-front-end","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faliakrem%2Fimage-processing-playground-front-end/lists"}