Hugging Face's logo

Spaces:
yeaman
/
yt-cleaner
Running

App Files Community
yeaman commited on
Commit
d28ebff
·
verified ·
1 Parent(s): b1d9c16

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +264 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Yt Cleaner
3
- emoji: 🚀
4
  colorFrom: purple
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: yt-cleaner
3
+ emoji: 🐳
4
  colorFrom: purple
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,264 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>YouTube Recommendation Cleaner</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ .toggle-checkbox:checked {
10
+ right: 0;
11
+ border-color: #3b82f6;
12
+ }
13
+ .toggle-checkbox:checked + .toggle-label {
14
+ background-color: #3b82f6;
15
+ }
16
+ </style>
17
+ </head>
18
+ <body class="bg-gray-100 min-h-screen">
19
+ <div class="container mx-auto px-4 py-8 max-w-3xl">
20
+ <!-- Header -->
21
+ <header class="mb-8">
22
+ <div class="flex items-center justify-between">
23
+ <div class="flex items-center">
24
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-600" viewBox="0 0 24 24" fill="currentColor">
25
+ <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
26
+ </svg>
27
+ <h1 class="text-2xl font-bold ml-3 text-gray-800">YouTube Recommendation Cleaner</h1>
28
+ </div>
29
+ <div class="flex items-center space-x-2">
30
+ <span class="text-sm font-medium text-gray-700">Enabled</span>
31
+ <div class="relative inline-block w-10 mr-2 align-middle select-none">
32
+ <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/>
33
+ <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
34
+ </div>
35
+ </div>
36
+ </div>
37
+ <p class="mt-2 text-gray-600">Clean up your YouTube recommendations by marking unwanted videos as "Not Interested"</p>
38
+ </header>
39
+
40
+ <!-- Main Content -->
41
+ <main>
42
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
43
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">How It Works</h2>
44
+ <div class="space-y-4">
45
+ <div class="flex items-start">
46
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
47
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
48
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
49
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
50
+ </svg>
51
+ </div>
52
+ <div class="ml-4">
53
+ <h3 class="text-lg font-medium text-gray-800">Right-Click Any Video</h3>
54
+ <p class="mt-1 text-gray-600">Simply right-click on any video thumbnail in your YouTube feed.</p>
55
+ </div>
56
+ </div>
57
+ <div class="flex items-start">
58
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
59
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
60
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
61
+ </svg>
62
+ </div>
63
+ <div class="ml-4">
64
+ <h3 class="text-lg font-medium text-gray-800">Select "Not Interested"</h3>
65
+ <p class="mt-1 text-gray-600">Choose the option to mark the video as not interested.</p>
66
+ </div>
67
+ </div>
68
+ <div class="flex items-start">
69
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
70
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
71
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
72
+ </svg>
73
+ </div>
74
+ <div class="ml-4">
75
+ <h3 class="text-lg font-medium text-gray-800">Cleaner Recommendations</h3>
76
+ <p class="mt-1 text-gray-600">YouTube will stop recommending similar content in your feed.</p>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
83
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Demo</h2>
84
+ <div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
85
+ <div class="flex items-start">
86
+ <div class="flex-shrink-0 relative">
87
+ <img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg" alt="Video thumbnail" class="w-40 h-24 rounded-lg object-cover">
88
+ <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-200">
89
+ <div class="bg-black bg-opacity-50 w-full h-full rounded-lg flex items-center justify-center">
90
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor">
91
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
92
+ </svg>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ <div class="ml-4 flex-1">
97
+ <h3 class="font-medium text-gray-800">Example Video Title</h3>
98
+ <p class="text-sm text-gray-600 mt-1">Channel Name • 1M views • 1 year ago</p>
99
+ <p class="text-sm text-gray-600 mt-2">Right-click on this thumbnail to see the "Not Interested" option in the context menu.</p>
100
+ </div>
101
+ <div class="flex-shrink-0">
102
+ <button class="text-gray-500 hover:text-gray-700">
103
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
104
+ <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
105
+ </svg>
106
+ </button>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="bg-white rounded-lg shadow-md p-6">
113
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Settings</h2>
114
+ <div class="space-y-4">
115
+ <div class="flex items-center justify-between">
116
+ <div>
117
+ <h3 class="font-medium text-gray-800">Show confirmation</h3>
118
+ <p class="text-sm text-gray-600">Show a confirmation when marking videos as not interested</p>
119
+ </div>
120
+ <label class="relative inline-flex items-center cursor-pointer">
121
+ <input type="checkbox" value="" class="sr-only peer" checked>
122
+ <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
123
+ </label>
124
+ </div>
125
+ <div class="flex items-center justify-between">
126
+ <div>
127
+ <h3 class="font-medium text-gray-800">Keyboard shortcut</h3>
128
+ <p class="text-sm text-gray-600">Quickly mark videos using a keyboard shortcut</p>
129
+ </div>
130
+ <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium">Alt+N</button>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ </main>
135
+
136
+ <!-- Footer -->
137
+ <footer class="mt-8 text-center text-gray-500 text-sm">
138
+ <p>YouTube Recommendation Cleaner v1.0</p>
139
+ <p class="mt-1">Not affiliated with YouTube or Google</p>
140
+ </footer>
141
+ </div>
142
+
143
+ <script>
144
+ // Toggle functionality
145
+ document.getElementById('toggle').addEventListener('change', function() {
146
+ if(this.checked) {
147
+ console.log('Extension enabled');
148
+ // Enable extension functionality
149
+ } else {
150
+ console.log('Extension disabled');
151
+ // Disable extension functionality
152
+ }
153
+ });
154
+
155
+ // This would be the actual extension code that runs on YouTube
156
+ // For demonstration purposes, we're just showing the UI
157
+ const actualExtensionCode = `
158
+ // manifest.json
159
+ {
160
+ "name": "YouTube Recommendation Cleaner",
161
+ "version": "1.0",
162
+ "description": "Clean up your YouTube recommendations by marking unwanted videos as 'Not Interested'",
163
+ "permissions": ["contextMenus", "activeTab"],
164
+ "background": {
165
+ "service_worker": "background.js"
166
+ },
167
+ "content_scripts": [
168
+ {
169
+ "matches": ["*://*.youtube.com/*"],
170
+ "js": ["content.js"]
171
+ }
172
+ ],
173
+ "action": {
174
+ "default_popup": "popup.html",
175
+ "default_icon": {
176
+ "16": "images/icon16.png",
177
+ "32": "images/icon32.png",
178
+ "48": "images/icon48.png",
179
+ "128": "images/icon128.png"
180
+ }
181
+ },
182
+ "icons": {
183
+ "16": "images/icon16.png",
184
+ "32": "images/icon32.png",
185
+ "48": "images/icon48.png",
186
+ "128": "images/icon128.png"
187
+ },
188
+ "manifest_version": 3
189
+ }
190
+
191
+ // background.js
192
+ chrome.runtime.onInstalled.addListener(() => {
193
+ chrome.contextMenus.create({
194
+ id: "notInterested",
195
+ title: "Not Interested",
196
+ contexts: ["image", "video", "link"],
197
+ documentUrlPatterns: ["*://*.youtube.com/*"]
198
+ });
199
+ });
200
+
201
+ chrome.contextMenus.onClicked.addListener((info, tab) => {
202
+ if (info.menuItemId === "notInterested") {
203
+ chrome.scripting.executeScript({
204
+ target: {tabId: tab.id},
205
+ function: markAsNotInterested,
206
+ args: [info]
207
+ });
208
+ }
209
+ });
210
+
211
+ function markAsNotInterested(info) {
212
+ // Find the video element that was right-clicked
213
+ const videoElement = findVideoElement(info);
214
+ if (!videoElement) return;
215
+
216
+ // Simulate click on the menu button
217
+ const menuButton = videoElement.querySelector('button[aria-label="Action menu"]') ||
218
+ videoElement.querySelector('.yt-lockup-metadata-view-model-wiz__menu-button button');
219
+ if (menuButton) {
220
+ menuButton.click();
221
+
222
+ // Wait for the menu to appear
223
+ setTimeout(() => {
224
+ // Find and click the "Not interested" option
225
+ const notInterestedOption = document.evaluate(
226
+ "//yt-formatted-string[contains(text(), 'Not interested')]",
227
+ document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null
228
+ ).singleNodeValue;
229
+
230
+ if (notInterestedOption) {
231
+ notInterestedOption.click();
232
+
233
+ // For "Don't recommend channel" option
234
+ setTimeout(() => {
235
+ const dontRecommendOption = document.evaluate(
236
+ "//yt-formatted-string[contains(text(), 'Don\\'t recommend channel')]",
237
+ document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null
238
+ ).singleNodeValue;
239
+
240
+ if (dontRecommendOption) {
241
+ dontRecommendOption.click();
242
+ }
243
+ }, 200);
244
+ }
245
+ }, 200);
246
+ }
247
+ }
248
+
249
+ function findVideoElement(info) {
250
+ // This function would find the parent video element based on the right-clicked element
251
+ // Implementation depends on YouTube's current DOM structure
252
+ let element = info.targetElementId ? document.getElementById(info.targetElementId) : null;
253
+ while (element && !element.classList.contains('yt-lockup-video')) {
254
+ element = element.parentElement;
255
+ }
256
+ return element;
257
+ }
258
+
259
+ // content.js
260
+ // This would handle any additional functionality needed on YouTube pages
261
+ `;
262
+ </script>
263
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=yeaman/yt-cleaner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
264
+ </html>