|
|
from flask import Flask, request, jsonify, render_template_string
|
|
|
from flask_cors import CORS
|
|
|
from bs4 import BeautifulSoup
|
|
|
import re
|
|
|
|
|
|
app = Flask(__name__)
|
|
|
CORS(app)
|
|
|
|
|
|
HTML_TEMPLATE = """
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>HTML Cleaner</title>
|
|
|
<style>
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
min-height: 100vh;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
max-width: 1400px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
text-align: center;
|
|
|
color: white;
|
|
|
margin-bottom: 30px;
|
|
|
}
|
|
|
|
|
|
.header h1 {
|
|
|
font-size: 2.5em;
|
|
|
margin-bottom: 10px;
|
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
|
|
}
|
|
|
|
|
|
.header p {
|
|
|
font-size: 1.1em;
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
|
|
|
.main-content {
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
gap: 20px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.panel {
|
|
|
background: white;
|
|
|
border-radius: 12px;
|
|
|
padding: 25px;
|
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
|
}
|
|
|
|
|
|
.panel h2 {
|
|
|
color: #667eea;
|
|
|
margin-bottom: 15px;
|
|
|
font-size: 1.5em;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
.icon {
|
|
|
font-size: 1.2em;
|
|
|
}
|
|
|
|
|
|
textarea {
|
|
|
width: 100%;
|
|
|
height: 400px;
|
|
|
padding: 15px;
|
|
|
border: 2px solid #e0e0e0;
|
|
|
border-radius: 8px;
|
|
|
font-family: 'Courier New', monospace;
|
|
|
font-size: 14px;
|
|
|
resize: vertical;
|
|
|
transition: border-color 0.3s;
|
|
|
}
|
|
|
|
|
|
textarea:focus {
|
|
|
outline: none;
|
|
|
border-color: #667eea;
|
|
|
}
|
|
|
|
|
|
.button-group {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
margin-top: 15px;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
button {
|
|
|
padding: 12px 24px;
|
|
|
border: none;
|
|
|
border-radius: 8px;
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
|
|
|
.btn-primary {
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
color: white;
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.btn-primary:hover {
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
|
|
}
|
|
|
|
|
|
.btn-secondary {
|
|
|
background: #f5f5f5;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.btn-secondary:hover {
|
|
|
background: #e0e0e0;
|
|
|
}
|
|
|
|
|
|
.btn-success {
|
|
|
background: #10b981;
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.btn-success:hover {
|
|
|
background: #059669;
|
|
|
}
|
|
|
|
|
|
.stats {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
|
gap: 15px;
|
|
|
margin-top: 15px;
|
|
|
}
|
|
|
|
|
|
.stat-card {
|
|
|
background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
|
|
|
padding: 15px;
|
|
|
border-radius: 8px;
|
|
|
border-left: 4px solid #667eea;
|
|
|
}
|
|
|
|
|
|
.stat-label {
|
|
|
font-size: 12px;
|
|
|
color: #666;
|
|
|
text-transform: uppercase;
|
|
|
letter-spacing: 1px;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
.stat-value {
|
|
|
font-size: 24px;
|
|
|
font-weight: bold;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.status {
|
|
|
padding: 10px 15px;
|
|
|
border-radius: 8px;
|
|
|
margin-top: 15px;
|
|
|
display: none;
|
|
|
animation: slideIn 0.3s;
|
|
|
}
|
|
|
|
|
|
@keyframes slideIn {
|
|
|
from {
|
|
|
opacity: 0;
|
|
|
transform: translateY(-10px);
|
|
|
}
|
|
|
to {
|
|
|
opacity: 1;
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.status.success {
|
|
|
background: #d1fae5;
|
|
|
color: #065f46;
|
|
|
border-left: 4px solid #10b981;
|
|
|
}
|
|
|
|
|
|
.status.error {
|
|
|
background: #fee2e2;
|
|
|
color: #991b1b;
|
|
|
border-left: 4px solid #ef4444;
|
|
|
}
|
|
|
|
|
|
.loading {
|
|
|
display: inline-block;
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
border: 3px solid #ffffff;
|
|
|
border-radius: 50%;
|
|
|
border-top-color: transparent;
|
|
|
animation: spin 1s linear infinite;
|
|
|
}
|
|
|
|
|
|
@keyframes spin {
|
|
|
to { transform: rotate(360deg); }
|
|
|
}
|
|
|
|
|
|
.example-section {
|
|
|
background: white;
|
|
|
border-radius: 12px;
|
|
|
padding: 25px;
|
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
|
|
|
.example-section h3 {
|
|
|
color: #667eea;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
|
|
|
.example-buttons {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
.example-btn {
|
|
|
padding: 8px 16px;
|
|
|
background: #f0f0f0;
|
|
|
border: 2px solid #667eea;
|
|
|
color: #667eea;
|
|
|
border-radius: 6px;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
|
|
|
.example-btn:hover {
|
|
|
background: #667eea;
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
.main-content {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
|
|
|
.header h1 {
|
|
|
font-size: 1.8em;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
<div class="header">
|
|
|
<h1>🧹 HTML Cleaner</h1>
|
|
|
<p>Remove HTML tags while preserving visible text and links</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="main-content">
|
|
|
<div class="panel">
|
|
|
<h2><span class="icon">📝</span> Input HTML</h2>
|
|
|
<textarea id="inputHtml" placeholder="Paste your HTML code here..."></textarea>
|
|
|
<div class="button-group">
|
|
|
<button class="btn-primary" onclick="cleanHtml()">
|
|
|
<span id="cleanBtnText">🧹 Clean HTML</span>
|
|
|
<span id="cleanBtnLoader" class="loading" style="display: none;"></span>
|
|
|
</button>
|
|
|
<button class="btn-secondary" onclick="clearInput()">🗑️ Clear</button>
|
|
|
</div>
|
|
|
<div class="stats">
|
|
|
<div class="stat-card">
|
|
|
<div class="stat-label">Characters</div>
|
|
|
<div class="stat-value" id="inputChars">0</div>
|
|
|
</div>
|
|
|
<div class="stat-card">
|
|
|
<div class="stat-label">Words</div>
|
|
|
<div class="stat-value" id="inputWords">0</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="panel">
|
|
|
<h2><span class="icon">✨</span> Cleaned Output</h2>
|
|
|
<textarea id="outputText" placeholder="Cleaned text will appear here..." readonly></textarea>
|
|
|
<div class="button-group">
|
|
|
<button class="btn-success" onclick="copyOutput()">📋 Copy to Clipboard</button>
|
|
|
<button class="btn-secondary" onclick="downloadOutput()">💾 Download</button>
|
|
|
</div>
|
|
|
<div class="stats">
|
|
|
<div class="stat-card">
|
|
|
<div class="stat-label">Characters</div>
|
|
|
<div class="stat-value" id="outputChars">0</div>
|
|
|
</div>
|
|
|
<div class="stat-card">
|
|
|
<div class="stat-label">Words</div>
|
|
|
<div class="stat-value" id="outputWords">0</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="status" class="status"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="example-section">
|
|
|
<h3>📚 Quick Examples</h3>
|
|
|
<div class="example-buttons">
|
|
|
<button class="example-btn" onclick="loadExample(1)">Simple Paragraph</button>
|
|
|
<button class="example-btn" onclick="loadExample(2)">With Links</button>
|
|
|
<button class="example-btn" onclick="loadExample(3)">Complex HTML</button>
|
|
|
<button class="example-btn" onclick="loadExample(4)">Article with Images</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
const examples = {
|
|
|
1: '<div><h1>Welcome</h1><p>This is a <strong>simple</strong> example.</p></div>',
|
|
|
2: '<p>Visit <a href="https://example.com">our website</a> for more info. Contact us at <a href="mailto:info@example.com">info@example.com</a></p>',
|
|
|
3: '<div class="container"><header><nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav></header><main><article><h2>Article Title</h2><p>Some content here with <span style="color:red;">styled text</span>.</p></article></main></div>',
|
|
|
4: '<article><h1>Travel Guide</h1><img src="photo.jpg" alt="Beach photo"><p>Check out this <a href="https://beach.com">amazing beach</a>!</p><img src="sunset.jpg" alt="Sunset view"><p>Beautiful sunsets every evening.</p></article>'
|
|
|
};
|
|
|
|
|
|
const inputHtml = document.getElementById('inputHtml');
|
|
|
const outputText = document.getElementById('outputText');
|
|
|
|
|
|
inputHtml.addEventListener('input', updateInputStats);
|
|
|
|
|
|
function updateInputStats() {
|
|
|
const text = inputHtml.value;
|
|
|
document.getElementById('inputChars').textContent = text.length;
|
|
|
document.getElementById('inputWords').textContent = text.trim() ? text.trim().split(/\s+/).length : 0;
|
|
|
}
|
|
|
|
|
|
function updateOutputStats() {
|
|
|
const text = outputText.value;
|
|
|
document.getElementById('outputChars').textContent = text.length;
|
|
|
document.getElementById('outputWords').textContent = text.trim() ? text.trim().split(/\s+/).length : 0;
|
|
|
}
|
|
|
|
|
|
async function cleanHtml() {
|
|
|
const html = inputHtml.value.trim();
|
|
|
|
|
|
if (!html) {
|
|
|
showStatus('Please enter some HTML to clean', 'error');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const cleanBtn = document.querySelector('.btn-primary');
|
|
|
const btnText = document.getElementById('cleanBtnText');
|
|
|
const btnLoader = document.getElementById('cleanBtnLoader');
|
|
|
|
|
|
btnText.style.display = 'none';
|
|
|
btnLoader.style.display = 'inline-block';
|
|
|
cleanBtn.disabled = true;
|
|
|
|
|
|
try {
|
|
|
const response = await fetch('/api/clean', {
|
|
|
method: 'POST',
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json',
|
|
|
},
|
|
|
body: JSON.stringify({ html: html })
|
|
|
});
|
|
|
|
|
|
const data = await response.json();
|
|
|
|
|
|
if (data.success) {
|
|
|
outputText.value = data.cleaned_text;
|
|
|
updateOutputStats();
|
|
|
showStatus('HTML cleaned successfully!', 'success');
|
|
|
} else {
|
|
|
showStatus('Error: ' + data.error, 'error');
|
|
|
}
|
|
|
} catch (error) {
|
|
|
showStatus('Error: ' + error.message, 'error');
|
|
|
} finally {
|
|
|
btnText.style.display = 'inline';
|
|
|
btnLoader.style.display = 'none';
|
|
|
cleanBtn.disabled = false;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function clearInput() {
|
|
|
inputHtml.value = '';
|
|
|
outputText.value = '';
|
|
|
updateInputStats();
|
|
|
updateOutputStats();
|
|
|
hideStatus();
|
|
|
}
|
|
|
|
|
|
function copyOutput() {
|
|
|
if (!outputText.value) {
|
|
|
showStatus('Nothing to copy', 'error');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
outputText.select();
|
|
|
document.execCommand('copy');
|
|
|
showStatus('Copied to clipboard!', 'success');
|
|
|
}
|
|
|
|
|
|
function downloadOutput() {
|
|
|
if (!outputText.value) {
|
|
|
showStatus('Nothing to download', 'error');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const blob = new Blob([outputText.value], { type: 'text/plain' });
|
|
|
const url = window.URL.createObjectURL(blob);
|
|
|
const a = document.createElement('a');
|
|
|
a.href = url;
|
|
|
a.download = 'cleaned_text.txt';
|
|
|
a.click();
|
|
|
window.URL.revokeObjectURL(url);
|
|
|
showStatus('Downloaded successfully!', 'success');
|
|
|
}
|
|
|
|
|
|
function loadExample(num) {
|
|
|
inputHtml.value = examples[num];
|
|
|
updateInputStats();
|
|
|
outputText.value = '';
|
|
|
updateOutputStats();
|
|
|
hideStatus();
|
|
|
}
|
|
|
|
|
|
function showStatus(message, type) {
|
|
|
const status = document.getElementById('status');
|
|
|
status.textContent = message;
|
|
|
status.className = 'status ' + type;
|
|
|
status.style.display = 'block';
|
|
|
|
|
|
setTimeout(() => {
|
|
|
hideStatus();
|
|
|
}, 5000);
|
|
|
}
|
|
|
|
|
|
function hideStatus() {
|
|
|
const status = document.getElementById('status');
|
|
|
status.style.display = 'none';
|
|
|
}
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
"""
|
|
|
|
|
|
def clean_html(html_content):
|
|
|
"""
|
|
|
Clean HTML content by removing tags but preserving visible text and links
|
|
|
"""
|
|
|
try:
|
|
|
soup = BeautifulSoup(html_content, 'html.parser')
|
|
|
|
|
|
|
|
|
for script in soup(["script", "style", "meta", "link", "head"]):
|
|
|
script.decompose()
|
|
|
|
|
|
|
|
|
def extract_text(element):
|
|
|
result = []
|
|
|
|
|
|
for content in element.children:
|
|
|
if content.name is None:
|
|
|
text = str(content).strip()
|
|
|
if text:
|
|
|
result.append(text)
|
|
|
elif content.name == 'a':
|
|
|
link_text = content.get_text().strip()
|
|
|
href = content.get('href', '')
|
|
|
if link_text and href:
|
|
|
result.append(f"{link_text} ({href})")
|
|
|
elif link_text:
|
|
|
result.append(link_text)
|
|
|
elif content.name == 'br':
|
|
|
result.append('\n')
|
|
|
elif content.name in ['p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li']:
|
|
|
|
|
|
inner = extract_text(content)
|
|
|
if inner:
|
|
|
result.append('\n' + ' '.join(inner) + '\n')
|
|
|
elif content.name == 'img':
|
|
|
alt = content.get('alt', '')
|
|
|
src = content.get('src', '')
|
|
|
if alt:
|
|
|
result.append(f"[Image: {alt}]")
|
|
|
elif src:
|
|
|
result.append(f"[Image: {src}]")
|
|
|
else:
|
|
|
|
|
|
result.extend(extract_text(content))
|
|
|
|
|
|
return result
|
|
|
|
|
|
|
|
|
text_parts = extract_text(soup)
|
|
|
|
|
|
|
|
|
cleaned_text = ' '.join(text_parts)
|
|
|
cleaned_text = re.sub(r'\n\s*\n', '\n\n', cleaned_text)
|
|
|
cleaned_text = re.sub(r' +', ' ', cleaned_text)
|
|
|
cleaned_text = cleaned_text.strip()
|
|
|
|
|
|
return cleaned_text
|
|
|
|
|
|
except Exception as e:
|
|
|
raise Exception(f"Error cleaning HTML: {str(e)}")
|
|
|
|
|
|
@app.route('/')
|
|
|
def index():
|
|
|
return render_template_string(HTML_TEMPLATE)
|
|
|
|
|
|
@app.route('/api/clean', methods=['POST'])
|
|
|
def clean_html_api():
|
|
|
try:
|
|
|
data = request.get_json()
|
|
|
|
|
|
if not data or 'html' not in data:
|
|
|
return jsonify({
|
|
|
'success': False,
|
|
|
'error': 'No HTML content provided'
|
|
|
}), 400
|
|
|
|
|
|
html_content = data['html']
|
|
|
cleaned_text = clean_html(html_content)
|
|
|
|
|
|
return jsonify({
|
|
|
'success': True,
|
|
|
'cleaned_text': cleaned_text,
|
|
|
'original_length': len(html_content),
|
|
|
'cleaned_length': len(cleaned_text)
|
|
|
})
|
|
|
|
|
|
except Exception as e:
|
|
|
return jsonify({
|
|
|
'success': False,
|
|
|
'error': str(e)
|
|
|
}), 500
|
|
|
|
|
|
if __name__ == '__main__':
|
|
|
app.run(host='0.0.0.0', port=7860, debug=True) |
