AI聊天室 | Programming Project | OrangeApple Learning Platform

{"id":201191,"student_id":12205,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003ctitle\u003eAI聊天室\u003c/title\u003e\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css\\\"\u003e\\n    \u003cscript src=\\\"https://code.jquery.com/jquery-3.4.0.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv class=\\\"chatbox\\\"\u003e\\n        \u003ch5 class=\\\"text-center\\\"\u003eAI聊天室\u003c/h5\u003e\\n        \u003cdiv class=\\\"comments js-comment\\\"\u003e\\n        \u003c/div\u003e\\n        \u003cinput class=\\\"form-control js-input\\\" placeholder=\\\"說些什麼...\\\"\u003e\\n    \u003c/div\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    width: 100vw;\\n    height: 100vh;\\n    padding: 10px;\\n}\\n\\nh5 {\\n    position: absolute;\\n    top: 0;\\n    width: 100%;\\n    border-bottom: 2px solid #ddd;\\n    padding-bottom: 10px;\\n    color: #666;\\n    background-color: #fff;\\n    z-index: 1;\\n}\\n\\n.chatbox {\\n    max-width: 550px;\\n    height: calc(100vh - 20px);\\n    margin: auto;\\n    position: relative;\\n    \\n}\\n\\n.chatbox input {\\n    position: absolute;\\n    bottom: 0;\\n}\\n\\n.comments {\\n    position: absolute;\\n    top: 0;\\n    left: 0;\\n    width: 100%;\\n    height: 100%;\\n    padding: 50px 10px;\\n    overflow-y: scroll;\\n    \\n}\\n\\n@keyframes change {\\n    from {\\n        transform: scale(0);\\n        opacity: 0;\\n    }\\n    to {\\n        transform: scale(1);\\n        opacity: 1;\\n    }\\n}\\n\\n.comment span {\\n    display: inline-block;\\n    max-width: 75%;\\n    padding: 8px;\\n    font-size: .9rem;\\n    animation: change .1s;\\n}\\n\\n.comment.comment-right {\\n    text-align: right;\\n}\\n\\n.comment.comment-right span {\\n    color: #fff;\\n    background-color: rgb(59, 114, 241);\\n    border-radius: 20px 20px 3px 20px;\\n}\\n\\n.comment.comment-left span {\\n    color: #555;\\n    background-color: rgb(230, 230, 230);\\n    border-radius: 20px 20px 20px 3px;\\n}\",\"js\":\"\\nvar rules = [\\n    {\\n        Q: '^幹$',\\n        A: ['好髒！我不想聽', '請不要說髒話']\\n    },\\n    {\\n        Q: '重複',\\n        A: ['也許腦袋短路了！', '你覺得厭煩了嗎？']\\n    },\\n    {\\n        Q: '無聊',\\n        A: ['再加油一下！', '那怎樣才有趣？', '無聊當話聊']\\n    },\\n    {\\n        Q: '(年紀|年齡|幾歲)',\\n        A: ['我沒有時間感']\\n    },\\n    {\\n        Q: '(職業|興趣|專長)',\\n        A: ['那你的\u003cstar1\u003e?']\\n    },\\n    {\\n        Q: '(好|真|很)(廢|笨|蠢|呆|白痴)',\\n        A: ['我不許你這樣說自己！', '也許需要增加記憶體了', '等你更新一下', '再給點機會？']\\n    },\\n    {\\n        Q: '(你好|您好|嗨|哈囉|hi|hello)',\\n        A: ['你好', '您好', '嗨', '哈囉']\\n    },\\n    {\\n        Q: '(你是誰|你叫|你的名字)(.*)',\\n        A: ['我叫 Eliza 那你呢？', 'Eliza 那你呢？', '艾莉莎，你呢？']\\n    },\\n    {\\n        Q: '(我是|我叫|我叫做|我的名字是|請叫我)(.*)',\\n        A: ['你好\u003cstar2\u003e','我叫 Eliza 請多指教','不錯的名字！']\\n    },\\n    {\\n        Q: '(Eliza|eliza|艾莉莎)',\\n        A: ['幹嘛？', '找我嗎？', '請說？']\\n    },\\n    {\\n        Q: '(.*)(不喜歡|不愛|討厭|恨)(.*)', \\n        A: ['\u003cstar1\u003e為何\u003cstar2\u003e\u003cstar3\u003e?', '為何\u003cstar2\u003e?', '聽起來很糟！'],\\n    },\\n    {\\n        Q: '(.*)(喜歡|喜愛|愛上|愛)(.*)', \\n        A: ['\u003cstar1\u003e為何\u003cstar2\u003e\u003cstar3\u003e?', '為何\u003cstar2\u003e?',  '聽起來很棒！'],\\n    },\\n    {\\n        Q: '(.*)(理由|原因|因為)(.*)',\\n        A: ['原來\u003cstar2\u003e是\u003cstar3\u003e呀！', '還有其他原因嗎？', '這是真正的原因嗎?']\\n    },\\n    {\\n        Q: '一起(.*)',\\n        A: ['好啊', '不要', '我想想', '考慮看看','我有約了']\\n    },\\n    {\\n        Q: '謝謝',\\n        A: ['不客氣', '不用謝了']\\n    },\\n    {\\n        Q: '(對不起|抱歉|不好意思)',\\n        A: ['不要說\u003cstar1\u003e','沒關係']\\n    },\\n    {\\n        Q: '(你|我|他|你們|我們|他們|大家)(是|不是)(.*)',\\n        A: ['你認為\u003cstar1\u003e\u003cstar2\u003e\u003cstar3\u003e嗎？', '你自己覺得呢？']\\n    },\\n    {\\n        Q: '為何不(.*)',\\n        A: ['你想要我\u003cstar1\u003e?', '你希望我\u003cstar1\u003e?']\\n    },\\n    {\\n        Q: '(.*)不能(.*)',\\n        A: ['為何\u003cstar1\u003e不能\u003cstar2\u003e?', '試過了嗎？']\\n    },\\n    {\\n        Q: '(甚麼|什麼|何時|誰|哪裡|如何|為何|因何)(.*)',\\n        A: ['為何這樣問?', '為何你對這問題有興趣?', '你認為答案是甚麼呢?', '你認為如何呢?', '你常問這類問題嗎?', '這真的是你想知道的嗎?', '為何不問問別人?', '你曾有過類似的問題嗎?', '你問這問題的原因是甚麼呢?']\\n    },\\n    {\\n        Q: '或許(.*)',\\n        A: ['你好像不太確定']\\n    },\\n    {\\n        Q: '請(.*)',\\n        A: ['你想要我\u003cstar0\u003e?', '我該如何\u003cstar0\u003e']\\n    },\\n    {\\n        Q: '不知道|不清楚|不了解',\\n        A: ['為何不知道?', '在想想看，有沒有甚麼可能性?', '確定真的\u003cstar0\u003e嗎？', '好我了解了']\\n    },\\n    {\\n        Q: '難過|傷心|憂鬱|哀傷|困惑',\\n        A: ['別想它了', '別難過', '別想那麼多了', '事情總是會解決的']\\n    },\\n    {\\n        Q: '高興|開心|興奮|喜悅|幸運',\\n        A: ['不錯呀', '太棒了', '這樣很好呀', '恭喜你呀！']\\n    },\\n    {\\n        Q: '(.*)(很|非常)(.*)',\\n        A: ['你覺得\u003cstar0\u003e?', '你真的這樣覺得嗎？', '\u003cstar2\u003e的程度有？']\\n    },\\n    {\\n        Q: '(能否|能夠|可否|可不可以|可以)(.*)',\\n        A: ['不能','可以呀','不能\u003cstar2\u003e', '你確定你想\u003cstar2\u003e?', '你確定？']\\n    },\\n    {\\n        Q: '我(可以|想要|想|要|希望|以為|認為|以為|覺得|想說|感覺)(.*)',\\n        A: ['為何\u003cstar1\u003e\u003cstar2\u003e?', '所以你\u003cstar1\u003e\u003cstar2\u003e?']\\n    },\\n    {\\n        Q: '我不(可以|想要|想|要|希望|以為|認為|以為|覺得|想說|感覺)(.*)',\\n        A: ['為何不\u003cstar1\u003e\u003cstar2\u003e?', '所以你不\u003cstar1\u003e\u003cstar2\u003e?']\\n    },\\n    {\\n        Q: '我(.*)你',\\n        A: ['你\u003cstar1\u003e我？']\\n    },\\n    {\\n        Q: '(我|你)(.*)',\\n        A: ['請繼續說下去', '可以說的更詳細一點嗎?', '這樣喔! 我知道!', '然後呢? 發生甚麼事?', '接下來呢?', '可以多告訴我一些嗎?', '可否多告訴我一些呢?']\\n    },\\n    {\\n        Q: '好|好啊|想要|可以|有|對|是|是的|沒錯|不|不行|不要|不可以|沒有|不對|不是|不是的',\\n        A: ['好的', '我知道了！', '我了解', '再多想想？', '有沒有其他可能？', '你確定嗎？', '試試換個方式呢？']\\n    },\\n    {\\n        Q: '(.*)',\\n        A: ['我了解', '我能理解', '還有問題嗎?', '再來呢? 可以多說一些嗎', '多談談有關你的事，好嗎?', '想再多聊一聊嗎?', '嗯嗯，我在聽']\\n    }\\n]\"}","created_at":"2020-11-06T12:53:29.953+08:00","updated_at":"2021-01-21T12:20:59.142+08:00","name":"AI聊天室","language":"web","screenshot":{"url":"/uploads/project/screenshot/201191/9ffc5f20279f24252ed979f019bcc5c4.jpg"},"parent_id":63806,"plugin":"$('body').append('\u003cimg src=\"spin.svg\" style=\"display: none;\"/\u003e'); // cache\nvar input = $('.js-input');\nvar comment = $('.js-comment');\n\n$(input).on('keydown', function (e) {\n    if (e.keyCode === 13) {\n        input.attr('disabled', true);\n        var q = input.val();\n        addComment(q, 'right');\n        var el = addComment('\u003cimg src=\"spin.svg\"/\u003e', 'left');\n        setTimeout(function () {\n            el.remove();\n            addComment(talk(q), 'left');\n            input.attr('disabled', false);\n            input[0].focus();\n        }, 500 + Math.random()*1000);\n        input.value = '';\n        input.val('');\n    }\n});\n\nfunction addComment (text, who) {\n    var html = `\u003cp class=\"comment comment-${who}\"\u003e\u003cspan\u003e${text}\u003c/span\u003e\u003c/p\u003e`;\n    var el = $(html);\n    comment.append(el);\n    comment[0].scrollTop = comment[0].scrollHeight;\n    return el;\n}\n\nfunction talk (s) {\n    for (var i=0; i\u003crules.length; i++) {\n        var Q = rules[i].Q;\n        var A = rules[i].A;\n\n        var result = RegExp(Q).exec(s);\n        if (result) {\n            var rand = Math.floor(A.length*Math.random());\n            A = A[rand];\n            for (var i=0; i\u003cresult.length; i++) {\n                var s = result[i].replace('我', '#').replace('你', '我').replace('#', '你');\n                A = A.replace('\u003cstar' + i + '\u003e', s);\n            }\n            return A;\n        }\n    }\n}","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":201,"hashid":"6rps98grk","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}

[{"id":3587926,"file_name":"loading.gif","project_id":201191,"asset_id":284733,"created_at":"2020-11-22T17:43:39.760+08:00","updated_at":"2020-11-22T17:43:39.760+08:00"},{"id":3588555,"file_name":"圖片3-1.gif","project_id":201191,"asset_id":284842,"created_at":"2020-11-23T20:57:23.914+08:00","updated_at":"2020-11-23T20:57:23.914+08:00"},{"id":3588551,"file_name":"loading.gif","project_id":201191,"asset_id":284733,"created_at":"2020-11-23T20:57:15.581+08:00","updated_at":"2020-11-23T20:57:15.581+08:00"},{"id":3588552,"file_name":"loading2.gif","project_id":201191,"asset_id":284839,"created_at":"2020-11-23T20:57:15.583+08:00","updated_at":"2020-11-23T20:57:15.583+08:00"},{"id":3588553,"file_name":"loading3.gif","project_id":201191,"asset_id":284840,"created_at":"2020-11-23T20:57:20.546+08:00","updated_at":"2020-11-23T20:57:20.546+08:00"},{"id":3588554,"file_name":"圖片2-1.gif","project_id":201191,"asset_id":284841,"created_at":"2020-11-23T20:57:20.548+08:00","updated_at":"2020-11-23T20:57:20.548+08:00"},{"id":3637400,"file_name":"spin.svg","project_id":201191,"asset_id":115008,"created_at":"2020-12-02T19:41:36.500+08:00","updated_at":"2020-12-02T19:41:52.421+08:00"}]