index.html

<!DOCTYPE html>

<html>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/codemirror.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/theme/eclipse.css">
<script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/codemirror.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/mode/clike/clike.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/mode/javascript/javascript.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/mode/python/python.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/mode/go/go.min.js"></script>
<style type="text/css">
	@media screen and (min-width:960px) {
		body {
			display: flex;
			justify-content: center;
		}
	}

	.CodeMirror {
		border: 1px solid black;
		font-size: 16px;
		width: 750px;
		height: 400px;
		margin: 1px;
	}

	@media screen and (min-width:1024px) {
		.CodeMirror {
			border: 1px solid black;
			font-size: 16px;
			width: 960px;
			height: 500px;
			margin: 1px;
		}
	}

	.container {
		max-width: 800px;
		min-width: 1000px;
		margin: 2 auto;
		padding-left: 0;
		padding-right: 0;
		align: "center";
	}


	ul li {
		padding: 10px 20px;
		display: inline-block;
		background: #ddd;
		border-radius: 3px;
		white-space: nowrap;
		margin: 1px;
	}

	a {
		color: blue;
		font-size: 20px;
	}

	img {
		margin-left: 5px;
		margin-top: 2px;
	}

	.nav {
		padding-left: 2px;
		margin-bottom: 0;
		list-style: none;
		position: relative;
		display: inline;
		white-space: nowrap;
	}

	#navarea {
		margin-top: 5px;
	}

	#inputarea {
		display: flex;
		margin-top: 5px;
		margin-left: 5px;
	}

	#input {
		width: 500px;
		height: 35px;
		font-size: 20px;
	}

	#button {
		width: 150px;
		height: 35px;
		font-size: 15px;
		margin: 2px;
	}
</style>

<head>
	<title>AI CodeGen</title>
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>

<body>
	<div class="container">
		<h3>基于Salesforce codegen和GPTJ、GPT-neo的AI代码生成</h3>
		<div id="navarea">
			<ul class="nav">
				<li><a href="javascript:onModeChange('cpp');">c c++ c#</a></li>
				<li><a href="javascript:onModeChange('python');">python</a></li>
				<li><a href="javascript:onModeChange('java');">Java</a></li>
				<li><a href="javascript:onModeChange('javascript');">javascript</a></li>
				<li><a href="javascript:onModeChange('golang');">golang</a></li>
				<li><a href="javascript:onModeChange('chatgpt');">GPT-neo</a></li>
				<li><a href="https://gitclone.com/aiit/chat/" target="_blank">Chat机器人</a></li>
			</ul>
		</div>
		<div id='inputarea'>
			<input type="text" name="input" id="input" placeholder="请输入..." onkeydown="onInputKeydown()"><br>
			<input type="submit" value="Enter生成" id="button" onclick="onGenCode1()">
		</div>
		<textarea id="code"></textarea>
		<div id="hint"></div>
		<p>
			VS Code插件（Codegeeker）：
		<div>
			<img src="https://gitclone.com/download1/aiit/extension.png" width="320" height="160" />
		</div>
		代码生成器源码:
		<a href="https://github.com/git-cloner/codegen" target="_blank">https://github.com/git-cloner/codegen</a>
		<br>
		VSCode插件源码:
		<a href="https://github.com/git-cloner/codegeeker" target="_blank">https://github.com/git-cloner/codegeeker</a>
	</div>
</body>
<script type="text/javascript">
	var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
		mode: "text/x-c",
		lineNumbers: true,
		theme: "eclipse",
		lineWrapping: true,
		extraKeys: {
			"Ctrl-Enter": function (cm) {
				onGenCode(cm.getValue());
			}
		}
	});
	onModeChange('cpp');
	document.getElementById("input").focus();

	function onGenCode1() {
		context = document.getElementById("input").value;
		onGenCode(context);
	}

	function onInputKeydown() {
		var e = window.event || arguments.callee.caller.arguments[0];
		if (e.keyCode == 13) {
			onGenCode1();
		}
	}

	function onModeChange(modename) {
		modestr = "";
		if (modename == "cpp") {
			modestr = "text/x-c";
			document.getElementById("input").value = "int add(int x,int y){";
		} else if (modename == "python") {
			modestr = "text/x-python";
			document.getElementById("input").value = "def hello_world():";
		} else if (modename == "java") {
			modestr = "text/x-java";
			document.getElementById("input").value = "int add(int x,int y){";
		} else if (modename == "javascript") {
			modestr = "javascript";
			document.getElementById("input").value = "function Add(x,y,z){";
		} else if (modename == "golang") {
			modestr = "text/x-go";
			document.getElementById("input").value = "func IsBlacklist(bl []string,url string) bool{";
		} else {
			modestr = "python";
			document.getElementById("input").value = "写一个python版的数组排序";
		}
		editor.setOption("mode", modestr)
		editor.focus();
		editor.setCursor(editor.lineCount(), 0);
		setTimeout("onGenCode1()", 500);
	}

	function onGenCode(context) {
		sl = context.trim().split("\n");
		context = sl[sl.length - 1];
		if (context.trim() == "") {
			alert("输入不能为空！")
			return;
		}
		document.getElementById("hint").innerText = "正在生成代码";
		let xhr = new XMLHttpRequest();
		xhr.open('post', 'https://gitclone.com/aiit/codegen');
		xhr.setRequestHeader('Content-Type', 'application/json');
		xhr.onload = function () {
			json = JSON.parse(xhr.response);
			console.log(json);
			context = "#Q:" + context + "\n\n" + "##A:\n" + context + "\n" + json.result;
			var index = 0;
			function type() {
				editor.setValue(context.substring(0, index++));
				if (index >= context.length) {
					clearInterval(timer);
					document.getElementById("input").value = "";
					document.getElementById("input").focus();
				}
			}
			var timer = setInterval(type, 10);

			document.getElementById("hint").innerText = "用时：" + json.time.toFixed(2) + '秒';
		}
		xhr.send('{"context":"' + context + '","maxlength":64}');
	}

</script>

</html>