https://github.com/snykk/pymark-frontend
PyMark Watermarking is a web-based application developed to streamline the watermarking process and facilitate automated publishing of watermarked images on Instagram
https://github.com/snykk/pymark-frontend
Last synced: 7 months ago
JSON representation
PyMark Watermarking is a web-based application developed to streamline the watermarking process and facilitate automated publishing of watermarked images on Instagram
- Host: GitHub
- URL: https://github.com/snykk/pymark-frontend
- Owner: snykk
- License: mit
- Created: 2023-12-23T06:20:56.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-11-15T07:01:31.000Z (11 months ago)
- Last Synced: 2025-01-19T05:29:42.470Z (9 months ago)
- Language: Vue
- Homepage:
- Size: 3.7 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PyMark Watermarking Frontend
PyMark Watermarking is a web-based application developed to streamline the watermarking process and facilitate automated publishing of watermarked images on Instagram. This project comprises two main features: **File-Sharing** and **Instagram-Publisher**.
## Key Features
### 1. File-Sharing
This feature uses Google Drive as a storage platform for watermarked images and includes the following sub-features:
- **Embedding**: Embeds a watermark image into a host image, producing a watermarked image (BMP), watermark position image (BMP), key matrix (NPY), and a compressed public image (JPG). The system also provides imperceptibility analysis using Peak Signal to Noise Ration and Structural similarity Index Measurement metrics.
- **Extraction**: Extracts the watermark from a watermarked image using the watermark position image (BMP), key matrix (NPY), and optionally conducts robustness analysis using Bit Error Rate and Normalized Cross Correlation metrics.
- **Image Processing**: Provides various image manipulation options such as blurring, Gaussian noise, sharpening, cropping, scaling, and more.
- **Analysis**: Performs imperceptibility analysis using Peak Signal to Noise Ration and Structural similarity Index Measurement, as well as robustness evaluation with Bit Error Rate and Normalized Cross Correlation.
- **My Drive**: Displays watermarked folders stored in Google Drive without requiring users to open the Google Drive application.
### 2. Instagram-Publisher
This feature integrates with the Meta Graph API to allow users to upload watermarked images directly to Instagram.
- **Post Now**: Embeds a watermark into a host image and publishes it on Instagram with a caption, mentions, and hashtags. The embedding result is stored on Google Drive.
- **My Post**: Displays watermarked image folders generated by the "Post Now" feature and stored in Google Drive.
## Technologies
### Frontend Framework and Integration
The PyMark frontend is developed using **Nuxt.js**, a Vue.js-based framework that enables the creation of dynamic, SEO-friendly, and responsive web applications. Nuxt.js supports reusable component structures, streamlining UI development and maintenance.
For backend integration, the frontend utilizes Nuxt.js’s `$fetch` function to securely communicate with the `pymark-backend`, facilitating essential operations such as user authentication, file upload, watermark embedding, and Instagram publishing via API endpoints.
### Authentication
Authentication ensures that only authorized users can access application features:
- **File-Sharing**: JWT tokens are stored in cookies for secure access.
- **Instagram-Publisher**: Authentication is handled through **Facebook Login**, which generates an access token using the Facebook SDK.
## Getting Started
### Setup
Make sure to install the dependencies:
```bash
yarn install
```
### Development Server
Start the development server on `http://localhost:3000`:
```bash
yarn dev
```
### Production
Build the application for production:
```bash
yarn build
```
Locally preview production build:
```bash
yarn preview
```
## License
This project is licensed under the [MIT License](https://github.com/snykk/pymark-frontend/blob/master/LICENSE)
## User Interface
File Sharing
##### File Sharing Index
##### File Sharing Registration Form
##### OTP Verification Form
##### File Sharing Login Form
##### File Sharing Embedding
##### File Sharing Extraction
##### File Sharing Analysis - Imperceptibility
##### File Sharing Analysis - Robustness
##### Image Processing - Salt and Pepper Noise
##### My Drive Folder List
##### My Drive Folder Detail (zoom browser 80%)
.png)
Instagram Publisher
##### Instagram Publisher Index
##### Instagram Publisher Facebook Dialog
##### Instagram Publisher Post Now
##### Instagram Publisher My Post Folder List
##### Instagram Publisher My Post Folder Detail
Additional Features
##### Theme Switcher
##### User Guide in PyMark
##### Loading Animation for Watermarking Process
##### Process Result (zoom browser 33%)
.png)
##### Toast Popup for Notifications
##### SweetAlert Dialog for Confirmations
