Add html folder (5266cfcc) · Commits · github_fork / ChatMol

html/chatmol.html

0 → 100644

+86 −0

Original line number	Diff line number	Diff line
		<!DOCTYPE html>
		<html lang="en">
		<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>ChatMol + PyMOL</title>
		<link rel="stylesheet" href="styles.css">
		</head>
		<body>
		<header>
		<nav>
		<ul>
		<li><a href="https://chatmol.org">ChatMol Home</a></li>
		<li><a href="https://github.com/JinyuanSun/ChatMol" target="_blank">ChatMol on Github</a></li>
		<li><a href="https://chatmol.org/screenshots.html">Screenshots</a></li>
		<li><a href="http://xp.chatmol.org/chatmol.html" target="_blank">PyMOL + ChatMol</a></li>
		<li><a href="https://chatmol.org/support.html">Support</a></li>
		<li><a href="https://chatmol.org/contact.html">Contact</a></li>
		</ul>
		</nav>
		</header>
		<div class="centered-text">
		<p>
		This web form offers a conversational interface for interacting with PyMOL. You can send a message describing the tasks you wish to perform using PyMOL. To allow ChatMol to handle your requests, begin your message with the special keyword chat. Your task description can be as simple as "chat load 1hiv and color chain A in red and chain B in blue." Upon receiving this message, ChatMol will forward it to ChatGPT, process the response, extract a set of PyMOL commands along with their corresponding parameters, and execute these commands in sequence. Currently, ChatMol may take several seconds (sometimes more than 10 seconds) to respond due to the high demand for ChatGPT API calls. For straightforward PyMOL commands, you can bypass ChatGPT and send commands directly to PyMOL. To do this, simply omit the chat keyword and type the usual PyMOL commands, such as fetch 1hiv.
		</p>
		</div>
		<main class="sub-main">
		<div class="left-column">
		<div>
		<label for="sample-queries">Sample Queries:</label>
		</div>
		<div>
		<select id="sample-queries" size="10">
		<option>chat load 1hiv and color chain A in red and chain B in blue</option>
		<option>chat fetch 1OGA and color differetly for all chains in the protein</option>
		<!-- Add more sample queries as <option> elements -->
		</select>
		</div>
		</div>
		<div class="right-column">
		<form id="message-form">
		<div>
		<label for="message" style="width:143px">Message to PyMOL</label>
		</div>
		<div>
		<textarea id="message" name="message" rows="4">chat fetch 1hiv and color red for chain A and blue for chain B</textarea>
		</div>
		<div>
		<button type="submit">Send to Your PyMOL</button>
		</div>
		</form>
		</div>
		</main>
		<script>
		// JavaScript code to handle form submission
		document.getElementById('message-form').addEventListener('submit', async (event) => {
		event.preventDefault(); // Prevent the form from submitting and refreshing the page

		const message = document.getElementById('message').value;
		const remoteServiceUrl = 'http://localhost:8101/send_message';

		try {
		const response = await fetch(remoteServiceUrl, {
		method: 'POST',
		headers: {
		'Content-Type': 'text/plain'
		},
		body: message
		});

		if (response.ok) {
		alert('Message sent successfully!');
		} else {
		alert('Error: ' + response.statusText);
		}
		} catch (error) {
		alert('Error: ' + error.message);
		}
		});
		document.getElementById('sample-queries').addEventListener('change', (event) => {
		const selectedQuery = event.target.value;
		document.getElementById('message').value = selectedQuery;
		});
		</script>
		</body>
		</html>

html/chatmol2.html

0 → 100644

+86 −0

Original line number	Diff line number	Diff line
		<!DOCTYPE html>
		<html lang="en">
		<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>ChatMol + PyMOL</title>
		<link rel="stylesheet" href="styles.css">
		</head>
		<body>
		<header>
		<nav>
		<ul>
		<li><a href="https://chatmol.org">ChatMol Home</a></li>
		<li><a href="https://github.com/JinyuanSun/ChatMol" target="_blank">ChatMol on Github</a></li>
		<li><a href="https://chatmol.org/screenshots.html">Screenshots</a></li>
		<li><a href="http://xp.chatmol.org/chatmol.html" target="_blank">PyMOL + ChatMol</a></li>
		<li><a href="https://chatmol.org/support.html">Support</a></li>
		<li><a href="https://chatmol.org/contact.html">Contact</a></li>
		</ul>
		</nav>
		</header>
		<div class="centered-text">
		<p>
		This web form offers a conversational interface for interacting with PyMOL. You can send a message describing the tasks you wish to perform using PyMOL. To allow ChatMol to handle your requests, begin your message with the special keyword chat. Your task description can be as simple as "chat load 1hiv and color chain A in red and chain B in blue." Upon receiving this message, ChatMol will forward it to ChatGPT, process the response, extract a set of PyMOL commands along with their corresponding parameters, and execute these commands in sequence. Currently, ChatMol may take several seconds (sometimes more than 10 seconds) to respond due to the high demand for ChatGPT API calls. For straightforward PyMOL commands, you can bypass ChatGPT and send commands directly to PyMOL. To do this, simply omit the chat keyword and type the usual PyMOL commands, such as fetch 1hiv.
		</p>
		</div>
		<main class="sub-main">
		<div class="left-column">
		<div>
		<label for="sample-queries">Sample Queries:</label>
		</div>
		<div>
		<select id="sample-queries" size="10">
		<option>chat load 1hiv and color chain A in red and chain B in blue</option>
		<option>chat fetch 1OGA and color differetly for all chains in the protein</option>
		<!-- Add more sample queries as <option> elements -->
		</select>
		</div>
		</div>
		<div class="right-column">
		<form id="message-form">
		<div>
		<label for="message" style="width:143px">Message to PyMOL</label>
		</div>
		<div>
		<textarea id="message" name="message" rows="4">chat fetch 1hiv and color red for chain A and blue for chain B</textarea>
		</div>
		<div>
		<button type="submit">Send to Your PyMOL</button>
		</div>
		</form>
		</div>
		</main>
		<script>
		// JavaScript code to handle form submission
		document.getElementById('message-form').addEventListener('submit', async (event) => {
		event.preventDefault(); // Prevent the form from submitting and refreshing the page

		const message = document.getElementById('message').value;
		const remoteServiceUrl = 'https://localhost:8102/send_message';

		try {
		const response = await fetch(remoteServiceUrl, {
		method: 'POST',
		headers: {
		'Content-Type': 'text/plain'
		},
		body: message
		});

		if (response.ok) {
		alert('Message sent successfully!');
		} else {
		alert('Error: ' + response.statusText);
		}
		} catch (error) {
		alert('Error: ' + error.message);
		}
		});
		document.getElementById('sample-queries').addEventListener('change', (event) => {
		const selectedQuery = event.target.value;
		document.getElementById('message').value = selectedQuery;
		});
		</script>
		</body>
		</html>

html/contact.html

0 → 100644

+32 −0

Original line number	Diff line number	Diff line
		<!DOCTYPE html>
		<html lang="en">
		<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Contact</title>
		<link rel="stylesheet" href="styles.css">
		</head>
		<body>
		<header>
		<!-- ...existing nav section... -->
		<nav>
		<ul>
		<li><a href="https://chatmol.org">ChatMol Home</a></li>
		<li><a href="https://github.com/JinyuanSun/ChatMol" target="_blank">ChatMol on Github</a></li>
		<li><a href="https://chatmol.org/screenshots.html">Screenshots</a></li>
		<li><a href="http://xp.chatmol.org/chatmol.html" target="_blank">PyMOL + ChatMol</a></li>
		<li><a href="https://chatmol.org/support.html">Support</a></li>
		<li><a href="https://chatmol.org/contact.html">Contact</a></li>
		</ul>
		</nav>
		</header>
		<main class="sub-main single-column">
		<h1>Contact</h1>
		<h2>Email</h2>
		<p><a href="mailto:contact@chatmol.org">contact@chatmol.org</a></p>
		<h2>ChatMol Community QR Code</h2>
		<p><img src="images/qr_code.png" alt="ChatMol Community QR Code" width="200" height="200"></p>
		</main>
		</body>
		</html>

html/index.html

0 → 100644

+42 −0

Original line number	Diff line number	Diff line
		<!DOCTYPE html>
		<html lang="en">
		<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>ChatMol</title>
		<link rel="stylesheet" href="styles.css">
		</head>
		<body>
		<header>
		<nav>
		<ul>
		<li><a href="https://chatmol.org">ChatMol Home</a></li>
		<li><a href="https://github.com/JinyuanSun/ChatMol" target="_blank">ChatMol on Github</a></li>
		<li><a href="https://chatmol.org/screenshots.html">Screenshots</a></li>
		<li><a href="http://xp.chatmol.org/chatmol.html" target="_blank">ChatMol + PyMOL</a></li>
		<li><a href="https://chatmol.org/support.html">Support</a></li>
		<li><a href="https://chatmol.org/contact.html">Contact</a></li>
		</ul>
		</nav>
		</header>
		<main class="home-main">
		<div class="left-column">
		<h1>ChatMol</h1>
		<h2>A Conversational Interface for Molecular Operations and Computation</h2>
		<h3>Powered by ChatGPT</h3>
		<p>Sponsors: ChemXAI Inc, WeComput LLC</p>
		</div>
		<div class="right-column">
		<h1>Recent News</h2>
		<p>May 6, 2023: Launch of ChatMol Org official website.</p>
		<p>April 28, 2023: James Li joined ChatMol team with new strategy and rich experience in research and product development.</p>
		<p>April 5-10, 2023: Jarrett Johnson and Zaur Amikishiyev contributed to ChatMol.</p>
		<p>March 26, 2023: Jinyuan Sun launched ChatMol project on Github.</p>
		</div>
		<div class="copyright">
		<p>Copyright (2023) by ChatMol Org</p>
		</div>
		</main>
		</body>
		</html>

html/screenshots.html

0 → 100644

+34 −0

Original line number	Diff line number	Diff line
		<!DOCTYPE html>
		<html lang="en">
		<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Screenshots - ChatMol</title>
		<link rel="stylesheet" href="styles.css">
		<script src="screenshots.js" defer></script>
		</head>
		<body>
		<!-- Include the same header as in the index.html -->
		<header>
		<nav>
		<ul>
		<li><a href="https://chatmol.org">ChatMol Home</a></li>
		<li><a href="https://github.com/JinyuanSun/ChatMol" target="_blank">ChatMol on Github</a></li>
		<li><a href="https://chatmol.org/screenshots.html">Screenshots</a></li>
		<li><a href="http://xp.chatmol.org/chatmol.html" target="_blank">ChatMol + PyMOL</a></li>
		<li><a href="https://chatmol.org/support.html">Support</a></li>
		<li><a href="https://chatmol.org/contact.html">Contact</a></li>
		</ul>
		</nav>
		<!-- ... -->
		</header>
		<main class="sub-main">
		<div class="screenshot-container">
		<center>
		<img src="images/screenshot1.png" alt="ChatMol Screenshot" id="screenshot">
		</center>
		</div>
		</main>
		</body>
		</html>

Admin message