create.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EFC</title>
<link rel="stylesheet" href="/css/create.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script>
function scrapeData() {
const url = document.getElementById('urlInput').value;
const htmlCheckbox = document.getElementById('htmlCheckbox').checked;
const cssCheckbox = document.getElementById('cssCheckbox').checked;
const javascriptCheckbox = document.getElementById('javascriptCheckbox').checked;
const responsiveCheckbox = document.getElementById('responsiveCheckbox').checked;
const generateHashtags = document.getElementById('hashtagCheckbox').checked;
fetch('/scrape', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ url, htmlCheckbox, cssCheckbox, javascriptCheckbox, responsiveCheckbox, generateHashtags })
})
.then(response => response.json())
.then(data => {
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = ''; // Clear previous results
if (data.image) {
const imgElement = document.createElement('img');
imgElement.id = 'resultImage';
imgElement.src = `data:image/jpeg;base64,${data.image}`;
imgElement.style.maxWidth = '100%';
resultDiv.appendChild(imgElement);
document.getElementById('download-buttons').style.display = 'block';
if (data.hashtags.length > 0) {
const hashtagDiv = document.createElement('div');
hashtagDiv.id = 'hashtags';
hashtagDiv.innerHTML = data.hashtags.map(hashtag => `<span class="hashtag">${hashtag}</span>`).join('');
resultDiv.appendChild(hashtagDiv);
}
} else {
alert('Error: ' + data.error);
}
})
.catch(error => {
console.error('Error:', error);
});
}
function downloadImage(buttonId) {
const img = document.getElementById('resultImage');
const link = document.createElement('a');
link.href = img.src;
link.download = `${buttonId}.jpg`;
link.click();
}
function selectSingleCheckbox(checkbox) {
const checkboxes = document.getElementsByClassName('single-checkbox');
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
}
checkbox.checked = true;
}
</script>
</head>
<body>
<main>
<div class="big-wrapper light">
<img src="" alt="" class="shape" />
{{> navbar}}
<div class="container2">
<div class="url-input-container">
<input type="url" id="urlInput" placeholder="Enter URL...">
<button class="btn-create" onclick="scrapeData()">Create</button>
</div>
<div class="checkbox-container">
<label><input type="checkbox" class="single-checkbox" id="htmlCheckbox" onclick="selectSingleCheckbox(this)">Web Scraped</label>
<label><input type="checkbox" class="single-checkbox" id="cssCheckbox" onclick="selectSingleCheckbox(this)">Generated Img</label>
<label><input type="checkbox" class="single-checkbox" id="javascriptCheckbox" onclick="selectSingleCheckbox(this)">Random Img</label>
<label><input type="checkbox" class="single-checkbox" id="responsiveCheckbox" onclick="selectSingleCheckbox(this)">Text Animated</label>
</div>
<label><input type="checkbox" id="hashtagCheckbox">Want to generate hashtags?</label>
</div>
<div class="result-container">
<div id="result"></div>
{{!-- <video id="resultVideo" width="100%" controls></video> --}}
<div id="download-buttons" style="display: none;">
<button class="btn-download" onclick="downloadImage('image1')">Download for <i class="fa-brands fa-facebook" style="color: #eceeee;"></i></button>
<button class="btn-download" onclick="downloadImage('image2')">Download for <i class="fa-brands fa-instagram" style="color: #eceeee;"></i></button>
<button class="btn-download" onclick="downloadImage('image3')">Download for <i class="fa-brands fa-twitter" style="color: #eceeee;"></i></button>
</div>
<div id="hashtags"></div>
</div>
</div>
<footer>
<p>EFC @ 2024 || All Rights Reserved.</p>
</footer>
</main>
<script src="/js/fyp.js"></script>
</body>
</html>
responsive_scrapper.py
import os
import sys
import requests
from bs4 import BeautifulSoup
from PIL import Image
from io import BytesIO
import numpy as np
import certifi
from moviepy.editor import VideoClip, ImageClip, TextClip, CompositeVideoClip, concatenate_videoclips
from moviepy.config import change_settings
import moviepy.editor as mp
import random
# Set the path to ImageMagick
change_settings({"IMAGEMAGICK_BINARY": r"C:Program FilesImageMagick-7.1.1-Q16-HDRImagick.exe"})
def fetch_webpage_content(url):
try:
response = requests.get(url, verify=certifi.where()) # Verify SSL certificate
response.raise_for_status() # Raise an exception for HTTP errors
return response.content
except requests.RequestException as e:
print(f"Error fetching webpage content: {e}", file=sys.stderr)
sys.exit(1)
def parse_title(content):
soup = BeautifulSoup(content, 'html.parser')
title_element = soup.find('h1')
return title_element.get_text(strip=True) if title_element else "Title not found"
def fetch_image(url):
try:
response = requests.get(url, verify=certifi.where()) # Verify SSL certificate
response.raise_for_status() # Raise an exception for HTTP errors
image = Image.open(BytesIO(response.content))
image = image.resize((1080, 1080), Image.Resampling.LANCZOS) # Resize the image to 1080x1080 pixels
return image
except requests.RequestException as e:
print(f"Error fetching image: {e}", file=sys.stderr)
sys.exit(1)
def get_random_animation():
animations = ['flyin', 'flyout', 'move_up_to_down']
return random.choice(animations)
def create_text_clip(text, duration=10):
text_clip = TextClip(text, fontsize=50, font='Arial-Bold', color='white', size=(1080, 200))
animation = get_random_animation()
if animation == 'flyin':
text_clip = text_clip.set_position(lambda t: ('center', 1080 - int(1080 * t))).fadein(0.5)
elif animation == 'flyout':
text_clip = text_clip.set_position(lambda t: ('center', int(1080 * t))).fadein(0.5)
elif animation == 'ove_up_to_down':
text_clip = text_clip.set_position(lambda t: ('center', 200 - int(880 * t))).fadein(0.5)
else:
text_clip = text_clip.set_position(('center', 'bottom'))
text_clip = text_clip.set_start(0).set_end(duration + 1).crossfadeout(1)
return text_clip
def create_video_with_text(image, text, duration=10):
image_np = np.array(image) # Convert PIL image to NumPy array
image_clip = ImageClip(image_np).set_duration(duration + len(text.split()) * 0.5) # Adjust image duration
text_clip = create_text_clip(text, duration)
video = CompositeVideoClip([image_clip, text_clip.set_position(('center', 'center')).resize(width=800)])
return video
def main(url):
content = fetch_webpage_content(url)
title_text = parse_title(content)
soup = BeautifulSoup(content, 'html.parser')
image_element = soup.find('img', class_='hover:ds-scale-110 hover:ds-transition-transform hover:ds-duration-500 hover:ds-ease-in-out ds-rounded-t-xl')
image_url = image_element['src'] if image_element and 'src' in image_element.attrs else None
if image_url:
image = fetch_image(image_url)
image = image.convert("RGB") # Ensure the image is in RGB mode
video = create_video_with_text(image, title_text)
video.write_videofile("output.mp4", fps=24)
print("Output saved as output.mp4")
else:
print("No image found", file=sys.stderr)
sys.exit(1)
if __name__ == "__main__":
if len(sys.argv) != 2:
print("Usage: python script.py <url>", file=sys.stderr)
sys.exit(1)
url = sys.argv[1]
main(url)
app.js server side
app.post(‘/scrape’, (req, res) => {
const { url, htmlCheckbox, cssCheckbox, javascriptCheckbox, responsiveCheckbox, generateHashtags } = req.body;
let pythonScriptPath;
if (htmlCheckbox) {
pythonScriptPath = path.join(__dirname, 'scraper.py');
} else if (cssCheckbox) {
pythonScriptPath = path.join(__dirname, 'css_scraper.py');
} else if (javascriptCheckbox) {
pythonScriptPath = path.join(__dirname, 'js_scraper.py');
} else if (responsiveCheckbox) {
pythonScriptPath = path.join(__dirname, 'responsive_scraper.py');
} else {
pythonScriptPath = path.join(__dirname, 'default_scraper.py');
}
const pythonProcess = spawn('python', [pythonScriptPath, url]);
let imageData = [];
let hashtags = [];
pythonProcess.stdout.on('data', (data) => {
imageData.push(data);
});
pythonProcess.stderr.on('data', (data) => {
console.error(`Error from Python: ${data}`);
});
pythonProcess.on('close', (code) => {
if (code !== 0) {
return res.status(500).json({ error: 'An error occurred while scraping the webpage.' });
}
const buffer = Buffer.concat(imageData);
const base64Image = buffer.toString('base64');
if (generateHashtags) {
const hashtagProcess = spawn('python', [path.join(__dirname, 'hashtag_generator.py'), url]);
hashtagProcess.stdout.on('data', (data) => {
hashtags = data.toString().trim().split('n');
});
hashtagProcess.stderr.on('data', (data) => {
console.error(`Error from Hashtag Generator: ${data}`);
});
hashtagProcess.on('close', (code) => {
if (code === 0) {
res.json({ image: base64Image, hashtags });
} else {
res.status(500).json({ error: 'An error occurred while generating hashtags.' });
}
});
} else {
res.json({ image: base64Image, hashtags: [] });
}
});
});
when i try to get three starting jpg result i get them succesfully but when trying to get responsive.py mp4 output on client side getting an img symbol
app.js
that img and mp4 both to be handled succesfully by server and client side
New contributor
HUZAIFA ASIF is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.