Hugging Face's logo

Spaces:
jasvir-singh1021
/
Transparent-Touch
Sleeping

App Files Community
Transparent-Touch
File size: 2,051 Bytes
f2209d8
 
 
 
 
 
 
 
 
 
 
c30db11
f2209d8
c30db11
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f2209d8
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
---
title: Transparent Touch
emoji: 👀
colorFrom: indigo
colorTo: pink
sdk: gradio
sdk_version: 5.38.2
app_file: app.py
pinned: false
short_description: Transparent Touch Overlay Image
---
# 🖼️ Overlay Image Composer

A Gradio app for overlaying one image over another with adjustable **position**, **scale**, **transparency**, and optional **flip** or **grayscale** effects.

Ideal for creating creative image compositions, watermarked visuals, and basic graphics design — all from the browser!

---

## 🚀 Features

- 📤 Upload background and overlay images
- ✨ Adjust overlay position (X/Y)
- 🔍 Resize overlay using scale slider
- 🕶️ Control overlay transparency
- 🔄 Flip the overlay image horizontally
- ⚫ Convert overlay to grayscale
- 💾 Download the final composed image

---

## 📦 Requirements

Install required libraries:

```bash
pip install -r requirements.txt

requirements.txt

gradio
Pillow>=10.0.0

▶️ Running the App

Run the app locally:

python app.py

Once running, you will see something like:

Running on local URL: http://127.0.0.1:7860

Open the link in your browser.
🌐 Hosting on Hugging Face Spaces

    Create a new Space on Hugging Face Spaces

    Select Gradio as the SDK

    Upload:

        app.py

        requirements.txt

    Click "Commit" and wait for the Space to build and deploy

📸 How to Use

    Upload a background image (base layer)

    Upload an overlay image (top layer)

    Adjust the X/Y position, scale, and transparency sliders

    Optionally flip or grayscale the overlay

    Click Generate Composite

    Click Download to save the final image

📝 Example Use Cases

    Creating simple posters or memes

    Adding semi-transparent logos/watermarks

    Designing collages or layered illustrations

    Quick visual experiments for digital artists

📄 License

MIT License
❤️ Credits

Built using Gradio and Pillow
Developed by Your Jasvir Singh
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference