{"id":120,"date":"2026-01-12T12:09:23","date_gmt":"2026-01-12T12:09:23","guid":{"rendered":"https:\/\/www.dariuszpiotrowski.pl\/?page_id=120"},"modified":"2026-01-12T15:44:21","modified_gmt":"2026-01-12T15:44:21","slug":"databot","status":"publish","type":"page","link":"https:\/\/www.dariuszpiotrowski.pl\/index.php\/databot\/","title":{"rendered":"AI ChatBot"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n<div id=\"databot-container\" style=\"max-width:600px; margin:20px auto; padding:15px; border:2px solid #0077cc; border-radius:10px; font-family:Arial; display:flex; gap:15px;\">\n  <!-- Panel 3D -->\n  <div id=\"databot-3d\" style=\"width:200px; height:300px; border:1px solid #ccc; border-radius:10px;\"><\/div>\n\n  <!-- Panel rozmowy -->\n  <div style=\"flex:1;\">\n    <h3 style=\"text-align:center;\">DataBot<\/h3>\n    <div id=\"databot-history\" style=\"min-height:150px; padding:10px; border:1px solid #ccc; margin-bottom:10px; border-radius:5px; background:#f9f9f9; overflow-y:auto; max-height:250px;\">\n      <div style=\"color:gray;\">DataBot gotowy do pracy...<\/div>\n    <\/div>\n    <input type=\"text\" id=\"databot-input\" placeholder=\"Napisz swoje pytanie...\" style=\"width:100%; padding:8px; margin-bottom:10px; box-sizing:border-box;\">\n    <button id=\"databot-btn\" style=\"width:100%; padding:10px; background:#0077cc; color:white; border:none; border-radius:5px; cursor:pointer;\">Wy\u015blij<\/button>\n  <\/div>\n<\/div>\n\n<!-- Three.js CDN -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.152.2\/build\/three.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.152.2\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\n\n<script>\n  \/\/ ========================\n  \/\/ 3D MODEL READY PLAYER ME\n  \/\/ ========================\n  const scene = new THREE.Scene();\n  const camera = new THREE.PerspectiveCamera(45, 200\/300, 0.1, 1000);\n  const renderer = new THREE.WebGLRenderer({ alpha:true });\n  renderer.setSize(200,300);\n  document.getElementById('databot-3d').appendChild(renderer.domElement);\n\n  const light = new THREE.HemisphereLight(0xffffff, 0x444444);\n  light.position.set(0,20,0);\n  scene.add(light);\n\n  const loader = new THREE.GLTFLoader();\n  let model;\n  loader.load(\n    'https:\/\/cdn.jsdelivr.net\/gh\/ReadyPlayerMe\/avatar-demo-assets@main\/avatars\/gltf\/sample_avatar.glb', \/\/ demo model\n    function(gltf){\n      model = gltf.scene;\n      model.scale.set(2,2,2);\n      model.position.y = -1.5;\n      scene.add(model);\n    },\n    undefined,\n    function(error){ console.error(error); }\n  );\n\n  camera.position.z = 5;\n  function animate3D() {\n    requestAnimationFrame(animate3D);\n    if(model) model.rotation.y += 0.005; \/\/ powolna animacja\n    renderer.render(scene, camera);\n  }\n  animate3D();\n\n  \/\/ ========================\n  \/\/ CHATBOT Z HISTORI\u0104 I G\u0141OSEM\n  \/\/ ========================\n  const history = document.getElementById('databot-history');\n  const input = document.getElementById('databot-input');\n  const btn = document.getElementById('databot-btn');\n\n  const answers = [\n    \"Cze\u015b\u0107! Jak mog\u0119 Ci pom\u00f3c?\",\n    \"Technicznie mog\u0119 zrobi\u0107 wiele, ale to demo tylko symuluje AI \ud83d\ude09\",\n    \"Hmm\u2026 ciekawy temat! Spr\u00f3buj zada\u0107 inne pytanie.\",\n    \"Super, \u017ce pytasz! Niestety, jeszcze si\u0119 ucz\u0119.\",\n    \"Tak, mog\u0119 o tym opowiedzie\u0107!\"\n  ];\n\n  function speak(text) {\n    if ('speechSynthesis' in window) {\n      const utter = new SpeechSynthesisUtterance(text);\n      utter.lang = 'pl-PL';\n      window.speechSynthesis.speak(utter);\n    }\n  }\n\n  btn.addEventListener('click', () => {\n    const question = input.value.trim();\n    if(!question) return;\n\n    const qDiv = document.createElement('div');\n    qDiv.style.color = \"#0077cc\"; qDiv.style.marginBottom=\"5px\";\n    qDiv.innerText = \"Ty: \" + question;\n    history.appendChild(qDiv);\n\n    const aDiv = document.createElement('div');\n    aDiv.style.color = \"#000\"; aDiv.style.marginBottom=\"10px\";\n    aDiv.innerText = \"DataBot my\u015bli...\";\n    history.appendChild(aDiv);\n    history.scrollTop = history.scrollHeight;\n\n    input.value = \"\";\n\n    setTimeout(() => {\n      const answer = answers[Math.floor(Math.random() * answers.length)];\n      aDiv.innerText = \"DataBot: \" + answer;\n      history.scrollTop = history.scrollHeight;\n      speak(answer);\n\n      \/\/ dodatkowa animacja - model lekko kiwnie g\u0142ow\u0105\n      if(model) model.rotation.x = 0.1;\n      setTimeout(()=>{ if(model) model.rotation.x=0; },300);\n    }, 1000);\n  });\n\n  input.addEventListener('keydown',(e)=>{ if(e.key===\"Enter\") btn.click(); });\n\n<\/script>\n<\/style>\n\n<div id=\"databot-container\" style=\"max-width:400px; margin:20px auto; padding:15px; border:2px solid #0077cc; border-radius:10px; font-family:Arial;\">\n  <h3 style=\"text-align:center;\">DataBot<\/h3>\n  <div id=\"databot-history\" style=\"min-height:100px; padding:10px; border:1px solid #ccc; margin-bottom:10px; border-radius:5px; background:#f9f9f9; overflow-y:auto; max-height:200px;\">\n    <div style=\"color:gray;\">DataBot gotowy do pracy&#8230;<\/div>\n  <\/div>\n  <input type=\"text\" id=\"databot-input\" placeholder=\"Napisz swoje pytanie...\" style=\"width:100%; padding:8px; margin-bottom:10px; box-sizing:border-box;\">\n  <button id=\"databot-btn\" style=\"width:100%; padding:10px; background:#0077cc; color:white; border:none; border-radius:5px; cursor:pointer;\">Wy\u015blij<\/button>\n<\/div>\n\n<script>\n  const history = document.getElementById('databot-history');\n  const input = document.getElementById('databot-input');\n  const btn = document.getElementById('databot-btn');\n\n  const answers = [\n    \"Cze\u015b\u0107! Jak mog\u0119 Ci pom\u00f3c?\",\n    \"Technicznie mog\u0119 zrobi\u0107 wiele, ale to demo tylko symuluje AI \ud83d\ude09\",\n    \"Hmm\u2026 ciekawy temat! Spr\u00f3buj zada\u0107 inne pytanie.\",\n    \"Super, \u017ce pytasz! Niestety, jeszcze si\u0119 ucz\u0119.\",\n    \"Tak, mog\u0119 o tym opowiedzie\u0107!\"\n  ];\n\n  function speak(text) {\n    if ('speechSynthesis' in window) {\n      const utter = new SpeechSynthesisUtterance(text);\n      utter.lang = 'pl-PL'; \/\/ j\u0119zyk polski\n      window.speechSynthesis.speak(utter);\n    }\n  }\n\n  btn.addEventListener('click', () => {\n    const question = input.value.trim();\n    if(!question) {\n      return;\n    }\n\n    \/\/ Dodanie pytania do historii\n    const qDiv = document.createElement('div');\n    qDiv.style.color = \"#0077cc\";\n    qDiv.style.marginBottom = \"5px\";\n    qDiv.innerText = \"Ty: \" + question;\n    history.appendChild(qDiv);\n\n    \/\/ Symulacja odpowiedzi\n    const aDiv = document.createElement('div');\n    aDiv.style.color = \"#000\";\n    aDiv.style.marginBottom = \"10px\";\n    aDiv.innerText = \"DataBot my\u015bli...\";\n    history.appendChild(aDiv);\n    history.scrollTop = history.scrollHeight;\n\n    input.value = \"\";\n\n    setTimeout(() => {\n      const answer = answers[Math.floor(Math.random() * answers.length)];\n      aDiv.innerText = \"DataBot: \" + answer;\n      history.scrollTop = history.scrollHeight;\n      speak(answer); \/\/ odczyt odpowiedzi\n    }, 800);\n  });\n\n  input.addEventListener('keydown', (e) => {\n    if(e.key === \"Enter\") btn.click();\n  });\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>DataBot DataBot gotowy do pracy&#8230; Wy\u015blij<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-120","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.dariuszpiotrowski.pl\/index.php\/wp-json\/wp\/v2\/pages\/120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dariuszpiotrowski.pl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.dariuszpiotrowski.pl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.dariuszpiotrowski.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dariuszpiotrowski.pl\/index.php\/wp-json\/wp\/v2\/comments?post=120"}],"version-history":[{"count":8,"href":"https:\/\/www.dariuszpiotrowski.pl\/index.php\/wp-json\/wp\/v2\/pages\/120\/revisions"}],"predecessor-version":[{"id":140,"href":"https:\/\/www.dariuszpiotrowski.pl\/index.php\/wp-json\/wp\/v2\/pages\/120\/revisions\/140"}],"wp:attachment":[{"href":"https:\/\/www.dariuszpiotrowski.pl\/index.php\/wp-json\/wp\/v2\/media?parent=120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}