Skip to content

Commit

Permalink
Add new characters and chat link
Browse files Browse the repository at this point in the history
  • Loading branch information
@EnderXie23
EnderXie23 committed May 29, 2024
1 parent e69c883 commit 9d7dcd8
Show file tree
Hide file tree
Showing 16 changed files with 340 additions and 76 deletions.
19 changes: 19 additions & 0 deletions sd/main.py
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
from diffusers import AutoPipelineForText2Image
import torch

# Load the base model
pipeline = AutoPipelineForText2Image.from_pretrained("/share/LLMs/stable-diffusion-2-1", torch_dtype=torch.float16, variant="fp16").to("cuda")

# Load the LoRA weights
lora_weights = torch.load("/gfshome/stable-diffusion-webui/models/Lora/furina-focalors-v2e1x.safetensors")

# Merge the LoRA weights with the base model
for name, param in pipeline.named_parameters():
if name in lora_weights:
param.data += lora_weights[name].data

# Generate an image with the modified pipeline
output = pipeline("furina, 1 girl, centered composition, masterpiece, photorealistic, 8k")

for image in output.images:
image.save("output.jpg")
Binary file added sd/output.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
59 changes: 53 additions & 6 deletions webpage/VM.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,17 +49,64 @@ <h2>Ender</h2>
<p>Welcome to Virtual Moments!</p>
</div>
</div>
<div class="suggestions">
<h3>Follow Someone!</h3>
<div class="suggestion">
<img src="photos/user.png" alt="User" class="suggestion-user-img">
<div class="friends">
<h3>Your Friends:</h3>
<div class="friend">
<img src="photos/furina.png" alt="Furina" class="friend-user-img">
<div>
<h4>Furina</h4>
<p>Followed by...</p>
<p>Available</p>
</div>
<button>Follow</button>
<button onclick="chatWithFriend(7861)">Chat...</button>
</div>
<div class="friend">
<img src="photos/tighnari.png" alt="Tighnari" class="friend-user-img">
<div>
<h4>Tighnari</h4>
<p>Available</p>
</div>
<button onclick="chatWithFriend(7862)">Chat...</button>
</div>
<div class="friend">
<img src="photos/iron.png" alt="Iron Man" class="friend-user-img">
<div>
<h4>Iron Man</h4>
<p>Available</p>
</div>
<button onclick="chatWithFriend(7863)">Chat...</button>
</div>
<div class="friend">
<img src="photos/jack.png" alt="Jack Sparrow" class="friend-user-img">
<div>
<h4>Jack Sparrow</h4>
<p>Available</p>
</div>
<button onclick="chatWithFriend(7864)">Chat...</button>
</div>
<div class="friend">
<img src="photos/tighnari.png" alt="Tighnari" class="friend-user-img">
<div>
<h4>Tighnari</h4>
<p>Available</p>
</div>
<button onclick="chatWithFriend(7862)">Chat...</button>
</div>
<div class="friend">
<img src="photos/tighnari.png" alt="Tighnari" class="friend-user-img">
<div>
<h4>Tighnari</h4>
<p>Available</p>
</div>
<button onclick="chatWithFriend(7862)">Chat...</button>
</div>
</div>

<script>
function chatWithFriend(friendId) {
// Open a new chat window with the friend
window.open('http://127.0.0.1:' + friendId, "_blank");
}
</script>
</div>
</div>
</main>
Expand Down
32 changes: 16 additions & 16 deletions webpage/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ main {
}

.sidebar {
width: 40%;
width: 300px;
margin-left: 30px;
position: sticky;
top: 70px;
Expand All @@ -136,28 +136,14 @@ main {
margin-right: 10px;
}

.user-info, .suggestions {
.user-info, .friends {
background-color: white;
border: 1px solid #dbdbdb;
padding: 10px;
margin-bottom: 20px;
border-radius: 3px;
}

.suggestion {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}

.suggestion-user-img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}

button {
background-color: #3897f0;
color: white;
Expand Down Expand Up @@ -193,3 +179,17 @@ button {
font-size: 18px;
z-index: 1000;
}

.friend {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}

.friend-user-img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
148 changes: 98 additions & 50 deletions webpage/js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,31 @@
// Initialize the feed
document.addEventListener('DOMContentLoaded', () => {
// Example usage of the function with some dummy data
createNewPost('Furina', 'photos/furina.png', 'Fountaine', 'So sleepy~', {'Neuvillete': "Have a good night's sleep!"});
createNewPost('Tighnari', 'photos/tighnari.png', 'Arusama', 'Having a great time!', {"Corei": "Are you out camping again?"});

createNewPost('Furina', 'photos/fpost.png', 'Fountaine', 'How do you like my new outfit~', {'Neuvillete': "Furina's new dress is fantastic!"});
createNewPost('Tighnari', 'photos/tighnari.png', 'Arusama', 'Having a great time in the forest!', {"Corei": "Are you out camping again?"});
createNewPost('Iron', 'photos/ipost.png', 'The U.S.', "Built myself a cool new suit!", {"Pepper": "Iron Man is so talented!"});
});

// Fetch response from the server
async function fetchResponse(prompt, character = 'None'){
const encodedPrompt = encodeURIComponent(prompt);
const url = `http://localhost:54226/answer?prompt=${encodedPrompt}&character=${character}`;

try{
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
const data = await response.json();
return data.message;
}catch(error){
console.error('Error:', error);
return null;
}
}

// Toggle follow button
document.querySelectorAll('.suggestion button').forEach(button => {
button.addEventListener('click', () => {
Expand All @@ -20,38 +40,45 @@ document.querySelectorAll('.suggestion button').forEach(button => {
});

// Like button functionality
document.querySelectorAll('.like-button').forEach(button => {
button.addEventListener('click', () => {
if (button.classList.contains('liked')) {
button.classList.remove('liked');
button.innerText = 'Like';
} else {
button.classList.add('liked');
button.innerText = 'Liked';
}
});
});
async function handleLikeButtonClick(button) {
const postElement = button.closest('.post');
const postSender = postElement.getAttribute('data-username');
const commentSection = postElement.querySelector('.comments');
const caption = postElement.querySelector('.post-footer p').innerText;

// Fetch response from the server
async function fetchResponse(prompt){
const encodedPrompt = encodeURIComponent(prompt);
const url = `http://localhost:54225/${encodedPrompt}`;
try {
// Generate a comment based on the caption
const prompt = `A friend Ender liked your post: "${caption}". Write a comment to thank him WITHIN 15 words.`;
const comment = await fetchResponse(prompt, postSender);

try{
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
const data = await response.json();
return data.message;
}catch(error){
if (comment) {
const responseComment = document.createElement('p');
responseComment.innerHTML = `<strong>${postSender}: </strong> ${comment}`;
commentSection.insertBefore(responseComment, commentSection.querySelector('.toggle-comments'));
updateCommentVisibility(commentSection);
} else {
console.error('Error: Failed to fetch bot response');
}
} catch (error) {
console.error('Error:', error);
return null;
}
}

document.querySelectorAll('.like-button').forEach(button => {
button.addEventListener('click', async function () {
if (this.classList.contains('liked')) {
this.classList.remove('liked');
this.innerText = 'Like';
} else {
this.classList.add('liked');
this.innerText = 'Liked';

// Handle the like button click
await handleLikeButtonClick(this);
}
});
});

// Comment functionality
document.querySelectorAll('.comment-input').forEach(input => {
input.addEventListener('keypress', async event => {
Expand All @@ -76,7 +103,7 @@ document.querySelectorAll('.comment-input').forEach(input => {
input.value = '';

try {
const response = await fetch('http://localhost:54225/post/', {
const response = await fetch('http://localhost:54226/post/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Expand Down Expand Up @@ -130,9 +157,7 @@ function updateCommentVisibility(commentsContainer) {
toggleButton.addEventListener('click', () => {
const isHidden = comments[0].style.display === 'none';
comments.forEach((comment, index) => {
if (index < commentCount - 3) {
comment.style.display = isHidden ? 'block' : 'none';
}
comment.style.display = isHidden ? 'block' : 'none';
});
toggleButton.innerText = isHidden ? 'Show fewer comments' : 'Show more comments';
});
Expand All @@ -149,15 +174,21 @@ function createNewPost(username, photoPath, location, caption, comments = {}) {
post.className = 'post';
post.setAttribute('data-username', username);

post.innerHTML = `
let postContent = `
<div class="post-header">
<img src="${photoPath}" alt="User" class="post-user-img">
<img src="photos/${username.toLowerCase()}.png" alt="User" class="post-user-img">
<div class="post-user-info">
<h2>${username}</h2>
<p>${location}</p>
</div>
</div>
<img src="${photoPath}" alt="Post Image" class="post-img">
</div>`;

// Conditionally include the post image
if (photoPath && photoPath !== 'null') {
postContent += `<img src="${photoPath}" alt="Post Image" class="post-img">`;
}

postContent += `
<div class="post-footer">
<p style="padding-left: 5mm;">${caption}</p>
<div class="post-actions">
Expand All @@ -171,6 +202,8 @@ function createNewPost(username, photoPath, location, caption, comments = {}) {
<input type="text" class="comment-input" placeholder="Add a comment...">
</div>
`;

post.innerHTML = postContent;

// Append the new post to the feed
feed.append(post);
Expand All @@ -185,14 +218,19 @@ function createNewPost(username, photoPath, location, caption, comments = {}) {
}

// Add event listeners for like and comment buttons
post.querySelector('.like-button').addEventListener('click', function () {
if (this.classList.contains('liked')) {
this.classList.remove('liked');
this.innerText = 'Like';
} else {
this.classList.add('liked');
this.innerText = 'Liked';
}
post.querySelectorAll('.like-button').forEach(button => {
button.addEventListener('click', async function () {
if (this.classList.contains('liked')) {
this.classList.remove('liked');
this.innerText = 'Like';
} else {
this.classList.add('liked');
this.innerText = 'Liked';

// Handle the like button click
await handleLikeButtonClick(this);
}
});
});

post.querySelector('.comment-input').addEventListener('keypress', async function (event) {
Expand All @@ -218,7 +256,7 @@ function createNewPost(username, photoPath, location, caption, comments = {}) {
this.value = '';

try {
const response = await fetch('http://localhost:54225/post/', {
const response = await fetch('http://localhost:54226/post/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Expand Down Expand Up @@ -246,17 +284,27 @@ function createNewPost(username, photoPath, location, caption, comments = {}) {
updateCommentVisibility(commentSection);
}

const cfPairs = [
{ character: 'Furina', friend: 'Neuvillete', place: 'Fountaine'},
{ character: 'Tighnari', friend: 'Corei', place: 'Arusama'},
{ character: 'Iron', friend: 'Pepper', place: 'The U.S.'},
{ character: 'Jack', friend: 'Sailor', place: 'The Atlantic Ocean' },
]

// Add event listener to the new post button
document.getElementById('new-post-button').addEventListener('click', async () => {
const loadingIndicator = document.getElementById('loading-indicator');
loadingIndicator.style.display = 'block';

const randomPair = cfPairs[Math.floor(Math.random() * cfPairs.length)];
const { character, friend, place} = randomPair;

try{
prompt1 = "Suppose you are a person named Furina. You are in Fountaine on vacation. You want to send a post to your friends. Write a post about your vacation in 10 words.";
caption = await fetchResponse(prompt1);
prompt2 = "Suppose you are a person named Neuvillete. You are a friend of Furina. You want to comment on Furina's post about vacation: " + caption + ". Write a comment only in 15 words.";
prompt1 = "Suppose you are a person named " + character + ". You are on summer vacation. You want to send a post to share with your friends about your trip. Write a post about your vacation WITHIN 10 words.";
caption = await fetchResponse(prompt1, character);
prompt2 = "Suppose you are a person named " + friend + ". You are a friend of " + character +". You want to comment on " + character + "'s post about vacation: " + caption + ". Write a comment WITHIN 15 words.";
comment = await fetchResponse(prompt2);
createNewPost('Furina', 'photos/furina.png', 'Fountaine', caption, {'Neuvillete': comment});
createNewPost(character, 'null', place, caption, {[friend]: comment});
}catch(error){
console.error('Error:', error);
}finally{
Expand Down
Binary file added webpage/photos/fpost.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added webpage/photos/ipost.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added webpage/photos/iron.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added webpage/photos/jack.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 9d7dcd8

Please sign in to comment.