{"id":9340,"date":"2026-07-08T16:16:33","date_gmt":"2026-07-08T09:16:33","guid":{"rendered":"https:\/\/www.forest.go.th\/it\/?p=9340"},"modified":"2026-09-16T15:48:44","modified_gmt":"2026-09-16T08:48:44","slug":"wana2","status":"publish","type":"post","link":"https:\/\/www.forest.go.th\/it\/blog\/wana2\/","title":{"rendered":"(\u0e2d\u0e22\u0e39\u0e48\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a) \u0e27\u0e19\u0e32 V2.0 Chatbot \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"9340\" class=\"elementor elementor-9340\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7da1ae8 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7da1ae8\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-07dc6d0\" data-id=\"07dc6d0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4dca155 elementor-widget elementor-widget-html\" data-id=\"4dca155\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \u0e19\u0e49\u0e2d\u0e07\u0e27\u0e19\u0e32 AI Chatbot Widget - WordPress Embeddable Snippet -->\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap\"\r\n    rel=\"stylesheet\">\r\n  <style>\r\n    :root {\r\n      --wana-primary: #1B5E20;\r\n      --wana-primary-light: #2E7D32;\r\n      --wana-primary-dark: #0D3B13;\r\n      --wana-accent: #66BB6A;\r\n      --wana-accent-glow: rgba(102, 187, 106, 0.35);\r\n      --wana-bg: #F1F8E9;\r\n      --wana-surface: #ffffff;\r\n      --wana-text: #1a1a1a;\r\n      --wana-text-muted: #6b7280;\r\n      --wana-radius: 16px;\r\n      --wana-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);\r\n      --wana-font: 'Noto Sans Thai', sans-serif;\r\n    }\r\n\r\n    #wana-chat-fab {\r\n      position: fixed;\r\n      bottom: 24px;\r\n      right: 24px;\r\n      z-index: 99999;\r\n      width: 64px;\r\n      height: 64px;\r\n      border-radius: 50%;\r\n      border: none;\r\n      cursor: pointer;\r\n      background: linear-gradient(135deg, var(--wana-primary), var(--wana-accent));\r\n      box-shadow: 0 6px 24px var(--wana-accent-glow);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: transform .25s, box-shadow .25s;\r\n    }\r\n\r\n    #wana-chat-fab:hover {\r\n      transform: scale(1.1);\r\n      box-shadow: 0 8px 32px var(--wana-accent-glow);\r\n    }\r\n\r\n    #wana-chat-fab svg {\r\n      width: 32px;\r\n      height: 32px;\r\n      fill: #fff;\r\n    }\r\n\r\n    #wana-chat-fab.open svg.chat-icon {\r\n      display: none;\r\n    }\r\n\r\n    #wana-chat-fab:not(.open) svg.close-icon {\r\n      display: none;\r\n    }\r\n\r\n    #wana-chat-container {\r\n      position: fixed;\r\n      bottom: 100px;\r\n      right: 24px;\r\n      z-index: 99998;\r\n      width: 400px;\r\n      max-width: calc(100vw - 32px);\r\n      height: 560px;\r\n      max-height: calc(100vh - 140px);\r\n      border-radius: var(--wana-radius);\r\n      overflow: hidden;\r\n      background: var(--wana-bg);\r\n      box-shadow: var(--wana-shadow);\r\n      display: flex;\r\n      flex-direction: column;\r\n      font-family: var(--wana-font);\r\n      opacity: 0;\r\n      transform: translateY(20px) scale(0.95);\r\n      pointer-events: none;\r\n      transition: opacity .3s, transform .3s;\r\n    }\r\n\r\n    #wana-chat-container.visible {\r\n      opacity: 1;\r\n      transform: translateY(0) scale(1);\r\n      pointer-events: all;\r\n    }\r\n\r\n    .wana-header {\r\n      background: linear-gradient(135deg, var(--wana-primary-dark), var(--wana-primary-light));\r\n      color: #fff;\r\n      padding: 16px 20px;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n    }\r\n\r\n    .wana-avatar {\r\n      width: 44px;\r\n      height: 44px;\r\n      border-radius: 50%;\r\n      background: var(--wana-accent);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 22px;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .wana-header-info h3 {\r\n      margin: 0;\r\n      font-size: 16px;\r\n      font-weight: 600;\r\n    }\r\n\r\n    .wana-header-info p {\r\n      margin: 2px 0 0;\r\n      font-size: 12px;\r\n      opacity: .85;\r\n    }\r\n\r\n    .wana-messages {\r\n      flex: 1;\r\n      overflow-y: auto;\r\n      padding: 16px;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 12px;\r\n      scroll-behavior: smooth;\r\n    }\r\n\r\n    .wana-messages::-webkit-scrollbar {\r\n      width: 5px;\r\n    }\r\n\r\n    .wana-messages::-webkit-scrollbar-thumb {\r\n      background: var(--wana-accent);\r\n      border-radius: 4px;\r\n    }\r\n\r\n    .wana-msg {\r\n      max-width: 85%;\r\n      padding: 12px 16px;\r\n      border-radius: 16px;\r\n      font-size: 14px;\r\n      line-height: 1.6;\r\n      animation: msgIn .3s ease;\r\n    }\r\n\r\n    @keyframes msgIn {\r\n      from {\r\n        opacity: 0;\r\n        transform: translateY(8px);\r\n      }\r\n    }\r\n\r\n    .wana-msg.bot {\r\n      align-self: flex-start;\r\n      background: var(--wana-surface);\r\n      border-bottom-left-radius: 4px;\r\n      box-shadow: 0 2px 8px rgba(0, 0, 0, .06);\r\n    }\r\n\r\n    .wana-msg.user {\r\n      align-self: flex-end;\r\n      background: linear-gradient(135deg, var(--wana-primary), var(--wana-primary-light));\r\n      color: #fff;\r\n      border-bottom-right-radius: 4px;\r\n    }\r\n\r\n    .wana-msg.bot .source-badge {\r\n      display: inline-block;\r\n      margin-top: 6px;\r\n      padding: 2px 8px;\r\n      border-radius: 8px;\r\n      font-size: 10px;\r\n      background: var(--wana-bg);\r\n      color: var(--wana-text-muted);\r\n    }\r\n\r\n    .wana-rich-buttons {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 8px;\r\n      margin-top: 8px;\r\n    }\r\n\r\n    .wana-rich-btn {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n      padding: 8px 14px;\r\n      border-radius: 20px;\r\n      border: 1.5px solid var(--wana-accent);\r\n      background: transparent;\r\n      color: var(--wana-primary);\r\n      font-size: 13px;\r\n      font-family: var(--wana-font);\r\n      cursor: pointer;\r\n      text-decoration: none;\r\n      transition: all .2s;\r\n    }\r\n\r\n    .wana-rich-btn:hover {\r\n      background: var(--wana-accent);\r\n      color: #fff;\r\n    }\r\n\r\n    .wana-typing {\r\n      align-self: flex-start;\r\n      display: flex;\r\n      gap: 5px;\r\n      padding: 12px 20px;\r\n      background: var(--wana-surface);\r\n      border-radius: 16px;\r\n      border-bottom-left-radius: 4px;\r\n    }\r\n\r\n    .wana-typing span {\r\n      width: 8px;\r\n      height: 8px;\r\n      border-radius: 50%;\r\n      background: var(--wana-accent);\r\n      animation: bounce 1.4s infinite;\r\n    }\r\n\r\n    .wana-typing span:nth-child(2) {\r\n      animation-delay: .2s;\r\n    }\r\n\r\n    .wana-typing span:nth-child(3) {\r\n      animation-delay: .4s;\r\n    }\r\n\r\n    @keyframes bounce {\r\n\r\n      0%,\r\n      60%,\r\n      100% {\r\n        transform: translateY(0);\r\n      }\r\n\r\n      30% {\r\n        transform: translateY(-8px);\r\n      }\r\n    }\r\n\r\n    .wana-input-area {\r\n      padding: 12px 16px;\r\n      background: var(--wana-surface);\r\n      border-top: 1px solid #e8e8e8;\r\n      display: flex;\r\n      gap: 10px;\r\n      align-items: center;\r\n    }\r\n\r\n    #wana-input {\r\n      flex: 1;\r\n      border: 1.5px solid #ddd;\r\n      border-radius: 24px;\r\n      padding: 10px 18px;\r\n      font-size: 14px;\r\n      font-family: var(--wana-font);\r\n      outline: none;\r\n      transition: border .2s;\r\n    }\r\n\r\n    #wana-input:focus {\r\n      border-color: var(--wana-accent);\r\n    }\r\n\r\n    #wana-send-btn {\r\n      width: 42px;\r\n      height: 42px;\r\n      border-radius: 50%;\r\n      border: none;\r\n      cursor: pointer;\r\n      background: linear-gradient(135deg, var(--wana-primary), var(--wana-accent));\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: transform .2s;\r\n    }\r\n\r\n    #wana-send-btn:hover {\r\n      transform: scale(1.08);\r\n    }\r\n\r\n    #wana-send-btn:disabled {\r\n      opacity: .5;\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    #wana-send-btn svg {\r\n      width: 20px;\r\n      height: 20px;\r\n      fill: #fff;\r\n    }\r\n  <\/style>\r\n\r\n  <!-- FAB Button -->\r\n  <button id=\"wana-chat-fab\" aria-label=\"Open chat\">\r\n    <svg class=\"chat-icon\" viewBox=\"0 0 24 24\">\r\n      <path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z\" \/>\r\n    <\/svg>\r\n    <svg class=\"close-icon\" viewBox=\"0 0 24 24\">\r\n      <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" \/>\r\n    <\/svg>\r\n  <\/button>\r\n\r\n  <!-- Chat Container -->\r\n  <div id=\"wana-chat-container\">\r\n    <div class=\"wana-header\">\r\n      <div class=\"wana-avatar\">\ud83c\udf33<\/div>\r\n      <div class=\"wana-header-info\">\r\n        <h3>\u0e19\u0e49\u0e2d\u0e07\u0e27\u0e19\u0e32 AI<\/h3>\r\n        <p>\u0e41\u0e0a\u0e17\u0e1a\u0e2d\u0e17\u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49 \u2022 \u0e15\u0e2d\u0e1a\u0e17\u0e38\u0e01\u0e04\u0e33\u0e16\u0e32\u0e21<\/p>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"wana-messages\" id=\"wana-messages\"><\/div>\r\n    <div class=\"wana-input-area\">\r\n      <input id=\"wana-input\" type=\"text\" placeholder=\"\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e17\u0e35\u0e48\u0e19\u0e35\u0e48...\" autocomplete=\"off\">\r\n      <button id=\"wana-send-btn\" aria-label=\"Send\">\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path d=\"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z\" \/>\r\n        <\/svg>\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    \/\/ ====== CONFIGURATION ======\r\n    const WEBHOOK_URL = 'https:\/\/n8n.forest.go.th\/webhook\/wana-chat';\r\n    const SESSION_ID = 'session_' + Math.random().toString(36).substr(2, 9);\r\n    const FETCH_TIMEOUT_MS = 120000; \/\/ 120 \u0e27\u0e34\u0e19\u0e32\u0e17\u0e35 (AI thinking model \u0e43\u0e0a\u0e49\u0e40\u0e27\u0e25\u0e32\u0e19\u0e32\u0e19)\r\n    const MAX_RETRIES = 1;           \/\/ retry \u0e2d\u0e35\u0e01 1 \u0e04\u0e23\u0e31\u0e49\u0e07\u0e16\u0e49\u0e32 timeout\r\n\r\n    \/\/ ====== STATE ======\r\n    let isOpen = false;\r\n    let isSending = false;\r\n\r\n    \/\/ ====== FUNCTIONS ======\r\n    function toggleChat() {\r\n      isOpen = !isOpen;\r\n      document.getElementById('wana-chat-container').classList.toggle('visible', isOpen);\r\n      document.getElementById('wana-chat-fab').classList.toggle('open', isOpen);\r\n      if (isOpen && document.getElementById('wana-messages').children.length === 0) {\r\n        addBotMessage('\u0e2a\u0e27\u0e31\u0e2a\u0e14\u0e35\u0e04\u0e48\u0e30! \u0e14\u0e34\u0e09\u0e31\u0e19\u0e19\u0e49\u0e2d\u0e07\u0e27\u0e19\u0e32 \u0e41\u0e0a\u0e17\u0e1a\u0e2d\u0e17\u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49\u0e04\u0e48\u0e30 \ud83c\udf32\\n\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e2a\u0e2d\u0e1a\u0e16\u0e32\u0e21\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49 \u0e01\u0e0e\u0e2b\u0e21\u0e32\u0e22 \u0e01\u0e32\u0e23\u0e02\u0e2d\u0e2d\u0e19\u0e38\u0e0d\u0e32\u0e15 \u0e2b\u0e23\u0e37\u0e2d\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e44\u0e14\u0e49\u0e40\u0e25\u0e22\u0e19\u0e30\u0e04\u0e30', 'welcome');\r\n      }\r\n      if (isOpen) document.getElementById('wana-input').focus();\r\n    }\r\n\r\n    function addBotMessage(text, source, richContent) {\r\n      const container = document.getElementById('wana-messages');\r\n      const div = document.createElement('div');\r\n      div.className = 'wana-msg bot';\r\n\r\n      \/\/ Format text: convert markdown-like bold and newlines\r\n      let html = text.replace(\/\\*\\*(.*?)\\*\\*\/g, '<strong>$1<\/strong>')\r\n        .replace(\/\\n\/g, '<br>')\r\n        .replace(\/(https?:\\\/\\\/[^\\s<]+)\/g, '<a href=\"$1\" target=\"_blank\" style=\"color:var(--wana-primary)\">$1<\/a>');\r\n      div.innerHTML = html;\r\n\r\n      if (source) {\r\n        const badge = document.createElement('span');\r\n        badge.className = 'source-badge';\r\n        const badgeMap = {\r\n          knowledge_base: '\ud83d\udcda \u0e08\u0e32\u0e01\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49',\r\n          wana_ai_agent:  '\ud83d\udcda \u0e08\u0e32\u0e01\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49',\r\n          welcome:        '\ud83d\udc4b \u0e22\u0e34\u0e19\u0e14\u0e35\u0e15\u0e49\u0e2d\u0e19\u0e23\u0e31\u0e1a',\r\n          error:          '\u26a0\ufe0f \u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14',\r\n          timeout:        '\u23f1\ufe0f \u0e43\u0e0a\u0e49\u0e40\u0e27\u0e25\u0e32\u0e19\u0e32\u0e19',\r\n        };\r\n        badge.textContent = badgeMap[source] || '\ud83e\udd16 AI \u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b';\r\n        div.appendChild(badge);\r\n      }\r\n\r\n      \/\/ Rich buttons\r\n      if (richContent && richContent.length > 0) {\r\n        const btnContainer = document.createElement('div');\r\n        btnContainer.className = 'wana-rich-buttons';\r\n        richContent.flat().forEach(item => {\r\n          if (item.type === 'button' && item.link) {\r\n            const a = document.createElement('a');\r\n            a.className = 'wana-rich-btn';\r\n            a.href = item.link;\r\n            a.target = '_blank';\r\n            a.textContent = item.text || '\u0e14\u0e39\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21';\r\n            btnContainer.appendChild(a);\r\n          }\r\n        });\r\n        if (btnContainer.children.length > 0) div.appendChild(btnContainer);\r\n      }\r\n\r\n      container.appendChild(div);\r\n      container.scrollTop = container.scrollHeight;\r\n    }\r\n\r\n    function addUserMessage(text) {\r\n      const container = document.getElementById('wana-messages');\r\n      const div = document.createElement('div');\r\n      div.className = 'wana-msg user';\r\n      div.textContent = text;\r\n      container.appendChild(div);\r\n      container.scrollTop = container.scrollHeight;\r\n    }\r\n\r\n    function showTyping() {\r\n      const container = document.getElementById('wana-messages');\r\n      const div = document.createElement('div');\r\n      div.className = 'wana-typing';\r\n      div.id = 'wana-typing-indicator';\r\n      div.innerHTML = '<span><\/span><span><\/span><span><\/span>';\r\n      container.appendChild(div);\r\n      container.scrollTop = container.scrollHeight;\r\n    }\r\n\r\n    function hideTyping() {\r\n      const el = document.getElementById('wana-typing-indicator');\r\n      if (el) el.remove();\r\n    }\r\n\r\n    \/\/ ====== FETCH WITH TIMEOUT + RETRY ======\r\n    async function fetchWithTimeout(url, options, timeoutMs) {\r\n      const controller = new AbortController();\r\n      const timer = setTimeout(() => controller.abort(), timeoutMs);\r\n      try {\r\n        const res = await fetch(url, { ...options, signal: controller.signal });\r\n        clearTimeout(timer);\r\n        return res;\r\n      } catch (err) {\r\n        clearTimeout(timer);\r\n        throw err;\r\n      }\r\n    }\r\n\r\n    async function callWebhook(text, attempt = 0) {\r\n      const res = await fetchWithTimeout(\r\n        WEBHOOK_URL,\r\n        {\r\n          method: 'POST',\r\n          headers: { 'Content-Type': 'application\/json' },\r\n          body: JSON.stringify({ message: text, session_id: SESSION_ID })\r\n        },\r\n        FETCH_TIMEOUT_MS\r\n      );\r\n      if (!res.ok) throw new Error(`HTTP ${res.status}`);\r\n      return res.json();\r\n    }\r\n\r\n    async function sendMessage() {\r\n      const input = document.getElementById('wana-input');\r\n      const text = input.value.trim();\r\n      if (!text || isSending) return;\r\n\r\n      isSending = true;\r\n      document.getElementById('wana-send-btn').disabled = true;\r\n      input.value = '';\r\n      addUserMessage(text);\r\n      showTyping();\r\n\r\n      let lastErr = null;\r\n      for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {\r\n        try {\r\n          const data = await callWebhook(text, attempt);\r\n          hideTyping();\r\n          addBotMessage(\r\n            data.text || '\u0e02\u0e2d\u0e2d\u0e20\u0e31\u0e22\u0e04\u0e48\u0e30 \u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1b\u0e23\u0e30\u0e21\u0e27\u0e25\u0e1c\u0e25\u0e44\u0e14\u0e49\u0e43\u0e19\u0e02\u0e13\u0e30\u0e19\u0e35\u0e49',\r\n            data.source || 'wana_ai_agent',\r\n            data.richContent\r\n          );\r\n          lastErr = null;\r\n          break;\r\n        } catch (err) {\r\n          lastErr = err;\r\n          console.warn(`Chat attempt ${attempt + 1} failed:`, err.name, err.message);\r\n          if (attempt < MAX_RETRIES) {\r\n            const typingEl = document.getElementById('wana-typing-indicator');\r\n            if (typingEl) typingEl.style.opacity = '0.5';\r\n            await new Promise(r => setTimeout(r, 2000));\r\n          }\r\n        }\r\n      }\r\n\r\n      if (lastErr) {\r\n        hideTyping();\r\n        const isTimeout = lastErr.name === 'AbortError';\r\n        const msg = isTimeout\r\n          ? '\u0e19\u0e49\u0e2d\u0e07\u0e27\u0e19\u0e32\u0e01\u0e33\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e30\u0e21\u0e27\u0e25\u0e1c\u0e25\u0e2d\u0e22\u0e39\u0e48\u0e04\u0e48\u0e30 \u0e43\u0e0a\u0e49\u0e40\u0e27\u0e25\u0e32\u0e19\u0e32\u0e19\u0e01\u0e27\u0e48\u0e32\u0e1b\u0e01\u0e15\u0e34 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e25\u0e2d\u0e07\u0e16\u0e32\u0e21\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07\u0e19\u0e30\u0e04\u0e30 \u23f1\ufe0f'\r\n          : '\u0e02\u0e2d\u0e2d\u0e20\u0e31\u0e22\u0e04\u0e48\u0e30 \u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e23\u0e30\u0e1a\u0e1a\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e0a\u0e31\u0e48\u0e27\u0e04\u0e23\u0e32\u0e27 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2a\u0e31\u0e01\u0e04\u0e23\u0e39\u0e48\u0e19\u0e30\u0e04\u0e30 \ud83d\ude4f';\r\n        addBotMessage(msg, isTimeout ? 'timeout' : 'error');\r\n        console.error('Chat final error:', lastErr);\r\n      }\r\n\r\n      isSending = false;\r\n      document.getElementById('wana-send-btn').disabled = false;\r\n      input.focus();\r\n    }\r\n\r\n    \/\/ Enter key support\r\n    document.getElementById('wana-input').addEventListener('keydown', e => {\r\n      if (e.key === 'Enter') sendMessage();\r\n    });\r\n\r\n    \/\/ Bind Event Listeners\r\n    document.getElementById('wana-chat-fab').addEventListener('click', toggleChat);\r\n    document.getElementById('wana-send-btn').addEventListener('click', sendMessage);\r\n  <\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0146e1f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0146e1f\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-75b5392\" data-id=\"75b5392\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-893f9f5 elementor-widget elementor-widget-html\" data-id=\"893f9f5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"th\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>Woodify AI \u2014 \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e0a\u0e19\u0e34\u0e14\u0e44\u0e21\u0e49\u0e08\u0e32\u0e01\u0e20\u0e32\u0e1e\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e31\u0e14<\/title>\r\n  <meta name=\"description\" content=\"\u0e23\u0e30\u0e1a\u0e1a AI \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e0a\u0e19\u0e34\u0e14\u0e44\u0e21\u0e49\u0e08\u0e32\u0e01\u0e20\u0e32\u0e1e\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e31\u0e14 \u0e42\u0e14\u0e22\u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49\" \/>\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\r\n  <style>\r\n    \/* ===== DESIGN TOKENS ===== *\/\r\n    :root {\r\n      --green-900: #0a2e0a;\r\n      --green-800: #0f3d0f;\r\n      --green-700: #1a5c1a;\r\n      --green-600: #237523;\r\n      --green-500: #2d952d;\r\n      --green-400: #3db53d;\r\n      --green-300: #5cd45c;\r\n      --green-200: #9de89d;\r\n      --green-100: #d4f5d4;\r\n      --gold-500: #c9a227;\r\n      --gold-400: #e0b83a;\r\n      --gold-300: #f0cc6a;\r\n      --brown-700: #3d2008;\r\n      --brown-500: #6b3a1a;\r\n      --brown-300: #a0652d;\r\n      --text-primary: #e8f5e8;\r\n      --text-secondary: #9de89d;\r\n      --text-muted: #5cd45c;\r\n      --surface-100: rgba(255,255,255,0.04);\r\n      --surface-200: rgba(255,255,255,0.08);\r\n      --surface-300: rgba(255,255,255,0.12);\r\n      --border: rgba(61,181,61,0.20);\r\n      --shadow-glow: 0 0 40px rgba(45,149,45,0.25);\r\n      --radius-lg: 20px;\r\n      --radius-md: 14px;\r\n      --radius-sm: 8px;\r\n      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    \/* ===== RESET & BASE ===== *\/\r\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n    body {\r\n      font-family: 'Noto Sans Thai', system-ui, sans-serif;\r\n      background: linear-gradient(135deg, var(--green-900) 0%, #0d1f0d 40%, #121a12 100%);\r\n      min-height: 100vh;\r\n      color: var(--text-primary);\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: flex-start;\r\n      padding: 24px 16px 48px;\r\n    }\r\n\r\n    \/* ===== CARD WRAPPER ===== *\/\r\n    .woodify-card {\r\n      width: 100%;\r\n      max-width: 680px;\r\n      background: linear-gradient(160deg, rgba(26,92,26,0.22) 0%, rgba(10,46,10,0.60) 100%);\r\n      border: 1px solid var(--border);\r\n      border-radius: var(--radius-lg);\r\n      box-shadow: var(--shadow-glow), 0 32px 80px rgba(0,0,0,0.55);\r\n      backdrop-filter: blur(20px);\r\n      overflow: hidden;\r\n    }\r\n\r\n    \/* ===== HEADER ===== *\/\r\n    .woodify-header {\r\n      background: linear-gradient(135deg, rgba(35,117,35,0.30) 0%, rgba(10,46,10,0.60) 100%);\r\n      border-bottom: 1px solid var(--border);\r\n      padding: 28px 32px 24px;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 16px;\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .woodify-header::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: -40px; right: -40px;\r\n      width: 160px; height: 160px;\r\n      background: radial-gradient(circle, rgba(61,181,61,0.15), transparent 70%);\r\n      border-radius: 50%;\r\n    }\r\n\r\n    .header-icon {\r\n      width: 56px; height: 56px;\r\n      background: linear-gradient(135deg, var(--green-500), var(--green-700));\r\n      border-radius: var(--radius-md);\r\n      display: flex; align-items: center; justify-content: center;\r\n      font-size: 28px;\r\n      box-shadow: 0 8px 24px rgba(45,149,45,0.40);\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .header-text h1 {\r\n      font-size: 1.35rem;\r\n      font-weight: 700;\r\n      color: var(--text-primary);\r\n      line-height: 1.2;\r\n    }\r\n\r\n    .header-text p {\r\n      font-size: 0.82rem;\r\n      color: var(--text-secondary);\r\n      margin-top: 3px;\r\n    }\r\n\r\n    .header-badge {\r\n      margin-left: auto;\r\n      background: linear-gradient(135deg, var(--gold-500), var(--gold-300));\r\n      color: var(--green-900);\r\n      font-size: 0.72rem;\r\n      font-weight: 700;\r\n      padding: 4px 10px;\r\n      border-radius: 100px;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    \/* ===== BODY ===== *\/\r\n    .woodify-body { padding: 28px 32px; }\r\n\r\n    \/* ===== UPLOAD ZONE ===== *\/\r\n    .upload-zone {\r\n      border: 2px dashed var(--green-600);\r\n      border-radius: var(--radius-md);\r\n      padding: 36px 24px;\r\n      text-align: center;\r\n      cursor: pointer;\r\n      transition: var(--transition);\r\n      background: var(--surface-100);\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .upload-zone:hover, .upload-zone.drag-over {\r\n      border-color: var(--green-400);\r\n      background: var(--surface-200);\r\n      box-shadow: 0 0 0 4px rgba(61,181,61,0.12);\r\n      transform: translateY(-2px);\r\n    }\r\n\r\n    .upload-zone input[type=\"file\"] {\r\n      position: absolute;\r\n      inset: 0;\r\n      opacity: 0;\r\n      cursor: pointer;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n\r\n    .upload-icon {\r\n      font-size: 48px;\r\n      margin-bottom: 12px;\r\n      display: block;\r\n      transition: var(--transition);\r\n    }\r\n\r\n    .upload-zone:hover .upload-icon { transform: scale(1.1); }\r\n\r\n    .upload-title {\r\n      font-size: 1rem;\r\n      font-weight: 600;\r\n      color: var(--text-primary);\r\n      margin-bottom: 4px;\r\n    }\r\n\r\n    .upload-subtitle {\r\n      font-size: 0.82rem;\r\n      color: var(--text-secondary);\r\n    }\r\n\r\n    \/* ===== PREVIEW ===== *\/\r\n    .preview-area {\r\n      display: none;\r\n      border-radius: var(--radius-md);\r\n      overflow: hidden;\r\n      position: relative;\r\n      margin-top: 16px;\r\n      border: 1px solid var(--border);\r\n    }\r\n\r\n    .preview-area.visible { display: block; }\r\n\r\n    .preview-area img {\r\n      width: 100%;\r\n      max-height: 280px;\r\n      object-fit: cover;\r\n      display: block;\r\n    }\r\n\r\n    .preview-clear {\r\n      position: absolute;\r\n      top: 10px; right: 10px;\r\n      background: rgba(0,0,0,0.65);\r\n      border: 1px solid rgba(255,255,255,0.15);\r\n      color: white;\r\n      border-radius: 50%;\r\n      width: 32px; height: 32px;\r\n      display: flex; align-items: center; justify-content: center;\r\n      cursor: pointer;\r\n      font-size: 14px;\r\n      transition: var(--transition);\r\n      z-index: 2;\r\n    }\r\n\r\n    .preview-clear:hover { background: rgba(200,50,50,0.7); }\r\n\r\n    \/* ===== API URL INPUT ===== *\/\r\n    .api-section {\r\n      margin-top: 16px;\r\n    }\r\n\r\n    .api-label {\r\n      font-size: 0.80rem;\r\n      color: var(--text-secondary);\r\n      margin-bottom: 6px;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n    }\r\n\r\n    .api-input {\r\n      width: 100%;\r\n      background: var(--surface-200);\r\n      border: 1px solid var(--border);\r\n      border-radius: var(--radius-sm);\r\n      padding: 10px 14px;\r\n      color: var(--text-primary);\r\n      font-family: 'Noto Sans Thai', monospace;\r\n      font-size: 0.82rem;\r\n      transition: var(--transition);\r\n      outline: none;\r\n    }\r\n\r\n    .api-input:focus {\r\n      border-color: var(--green-400);\r\n      box-shadow: 0 0 0 3px rgba(61,181,61,0.15);\r\n    }\r\n\r\n    \/* ===== ANALYZE BUTTON ===== *\/\r\n    .btn-analyze {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 10px;\r\n      width: 100%;\r\n      margin-top: 20px;\r\n      padding: 15px 24px;\r\n      background: linear-gradient(135deg, var(--green-500) 0%, var(--green-700) 100%);\r\n      color: white;\r\n      font-family: 'Noto Sans Thai', sans-serif;\r\n      font-size: 1rem;\r\n      font-weight: 700;\r\n      border: none;\r\n      border-radius: var(--radius-md);\r\n      cursor: pointer;\r\n      transition: var(--transition);\r\n      box-shadow: 0 6px 24px rgba(45,149,45,0.40);\r\n      letter-spacing: 0.02em;\r\n    }\r\n\r\n    .btn-analyze:hover:not(:disabled) {\r\n      background: linear-gradient(135deg, var(--green-400) 0%, var(--green-600) 100%);\r\n      box-shadow: 0 8px 32px rgba(61,181,61,0.50);\r\n      transform: translateY(-2px);\r\n    }\r\n\r\n    .btn-analyze:disabled {\r\n      opacity: 0.5;\r\n      cursor: not-allowed;\r\n      transform: none;\r\n    }\r\n\r\n    .btn-analyze .spinner {\r\n      display: none;\r\n      width: 18px; height: 18px;\r\n      border: 2px solid rgba(255,255,255,0.3);\r\n      border-top-color: white;\r\n      border-radius: 50%;\r\n      animation: spin 0.7s linear infinite;\r\n    }\r\n\r\n    .btn-analyze.loading .spinner { display: block; }\r\n    .btn-analyze.loading .btn-text { display: none; }\r\n\r\n    @keyframes spin { to { transform: rotate(360deg); } }\r\n\r\n    \/* ===== RESULT SECTION ===== *\/\r\n    .result-section {\r\n      margin-top: 24px;\r\n      display: none;\r\n      animation: fadeSlideUp 0.4s ease;\r\n    }\r\n\r\n    .result-section.visible { display: block; }\r\n\r\n    @keyframes fadeSlideUp {\r\n      from { opacity: 0; transform: translateY(12px); }\r\n      to   { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    \/* TOP RESULT CARD *\/\r\n    .result-top {\r\n      background: linear-gradient(135deg, rgba(35,117,35,0.25), rgba(10,46,10,0.50));\r\n      border: 1px solid rgba(61,181,61,0.30);\r\n      border-radius: var(--radius-md);\r\n      padding: 24px;\r\n      text-align: center;\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .result-top::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      inset: 0;\r\n      background: radial-gradient(ellipse at 50% 0%, rgba(61,181,61,0.12), transparent 70%);\r\n      pointer-events: none;\r\n    }\r\n\r\n    .result-label {\r\n      font-size: 0.78rem;\r\n      color: var(--text-secondary);\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.08em;\r\n      margin-bottom: 8px;\r\n    }\r\n\r\n    .result-wood-name {\r\n      font-size: 2.2rem;\r\n      font-weight: 700;\r\n      color: var(--green-300);\r\n      line-height: 1;\r\n      margin-bottom: 6px;\r\n    }\r\n\r\n    .result-confidence {\r\n      font-size: 1rem;\r\n      color: var(--gold-400);\r\n      font-weight: 600;\r\n      margin-bottom: 14px;\r\n    }\r\n\r\n    .result-status-badge {\r\n      display: inline-block;\r\n      background: rgba(201,162,39,0.15);\r\n      border: 1px solid rgba(201,162,39,0.35);\r\n      color: var(--gold-300);\r\n      font-size: 0.80rem;\r\n      padding: 6px 14px;\r\n      border-radius: 100px;\r\n    }\r\n\r\n    \/* CONFIDENCE BAR *\/\r\n    .confidence-bar-wrap {\r\n      margin-top: 16px;\r\n      background: rgba(0,0,0,0.25);\r\n      border-radius: 100px;\r\n      height: 8px;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .confidence-bar {\r\n      height: 100%;\r\n      background: linear-gradient(90deg, var(--green-500), var(--green-300));\r\n      border-radius: 100px;\r\n      transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    \/* UNCERTAIN WARNING *\/\r\n    .uncertain-badge {\r\n      display: none;\r\n      align-items: center;\r\n      gap: 8px;\r\n      background: rgba(200,120,20,0.15);\r\n      border: 1px solid rgba(200,120,20,0.30);\r\n      border-radius: var(--radius-sm);\r\n      padding: 10px 14px;\r\n      font-size: 0.82rem;\r\n      color: #f5c842;\r\n      margin-top: 14px;\r\n    }\r\n\r\n    .uncertain-badge.visible { display: flex; }\r\n\r\n    \/* TOP-3 LIST *\/\r\n    .result-divider {\r\n      font-size: 0.78rem;\r\n      color: var(--text-secondary);\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.08em;\r\n      margin: 20px 0 12px;\r\n    }\r\n\r\n    .top3-list { display: flex; flex-direction: column; gap: 8px; }\r\n\r\n    .top3-item {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n      background: var(--surface-100);\r\n      border: 1px solid var(--border);\r\n      border-radius: var(--radius-sm);\r\n      padding: 12px 16px;\r\n      transition: var(--transition);\r\n    }\r\n\r\n    .top3-item:hover { background: var(--surface-200); }\r\n\r\n    .top3-rank {\r\n      width: 26px; height: 26px;\r\n      background: var(--surface-200);\r\n      border-radius: 50%;\r\n      display: flex; align-items: center; justify-content: center;\r\n      font-size: 0.72rem;\r\n      font-weight: 700;\r\n      color: var(--text-secondary);\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .top3-rank.gold { background: rgba(201,162,39,0.20); color: var(--gold-400); }\r\n\r\n    .top3-info { flex: 1; }\r\n\r\n    .top3-name {\r\n      font-size: 0.90rem;\r\n      font-weight: 600;\r\n      color: var(--text-primary);\r\n    }\r\n\r\n    .top3-status {\r\n      font-size: 0.74rem;\r\n      color: var(--text-secondary);\r\n      margin-top: 2px;\r\n    }\r\n\r\n    .top3-pct {\r\n      font-size: 0.90rem;\r\n      font-weight: 700;\r\n      color: var(--green-300);\r\n      min-width: 52px;\r\n      text-align: right;\r\n    }\r\n\r\n    .top3-bar-wrap {\r\n      width: 100%;\r\n      background: rgba(0,0,0,0.25);\r\n      border-radius: 100px;\r\n      height: 4px;\r\n      margin-top: 6px;\r\n    }\r\n\r\n    .top3-bar {\r\n      height: 100%;\r\n      background: linear-gradient(90deg, var(--green-600), var(--green-400));\r\n      border-radius: 100px;\r\n    }\r\n\r\n    \/* ERROR *\/\r\n    .error-box {\r\n      display: none;\r\n      background: rgba(180,30,30,0.15);\r\n      border: 1px solid rgba(180,30,30,0.35);\r\n      border-radius: var(--radius-sm);\r\n      padding: 14px 18px;\r\n      font-size: 0.85rem;\r\n      color: #f99;\r\n      margin-top: 16px;\r\n      gap: 8px;\r\n      align-items: flex-start;\r\n    }\r\n\r\n    .error-box.visible { display: flex; }\r\n\r\n    \/* FOOTER *\/\r\n    .woodify-footer {\r\n      border-top: 1px solid var(--border);\r\n      padding: 16px 32px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      flex-wrap: wrap;\r\n      gap: 8px;\r\n    }\r\n\r\n    .footer-text {\r\n      font-size: 0.75rem;\r\n      color: var(--text-secondary);\r\n    }\r\n\r\n    .footer-dot {\r\n      width: 6px; height: 6px;\r\n      border-radius: 50%;\r\n      background: var(--green-400);\r\n      animation: pulse 2s ease-in-out infinite;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    @keyframes pulse {\r\n      0%, 100% { opacity: 1; transform: scale(1); }\r\n      50%       { opacity: 0.4; transform: scale(0.7); }\r\n    }\r\n\r\n    .footer-status { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-secondary); }\r\n\r\n    \/* ===== RESPONSIVE ===== *\/\r\n    @media (max-width: 480px) {\r\n      .woodify-body, .woodify-header, .woodify-footer { padding-left: 20px; padding-right: 20px; }\r\n      .result-wood-name { font-size: 1.8rem; }\r\n      .header-badge { display: none; }\r\n    }\r\n\r\n    \/* ===== EMBED MODE (\u0e44\u0e21\u0e48\u0e21\u0e35 body background) ===== *\/\r\n    .woodify-embed body {\r\n      background: transparent;\r\n      padding: 0;\r\n      min-height: unset;\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <div class=\"woodify-card\" id=\"woodifyApp\">\r\n\r\n    <!-- HEADER -->\r\n    <div class=\"woodify-header\">\r\n      <div class=\"header-icon\">\ud83c\udf33<\/div>\r\n      <div class=\"header-text\">\r\n        <h1>Woodify AI<\/h1>\r\n        <p>\u0e23\u0e30\u0e1a\u0e1a\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e0a\u0e19\u0e34\u0e14\u0e44\u0e21\u0e49\u0e08\u0e32\u0e01\u0e20\u0e32\u0e1e\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e31\u0e14 \u2014 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49<\/p>\r\n      <\/div>\r\n      <span class=\"header-badge\">V 2.0<\/span>\r\n    <\/div>\r\n\r\n    <!-- BODY -->\r\n    <div class=\"woodify-body\">\r\n\r\n      <!-- UPLOAD ZONE -->\r\n      <div class=\"upload-zone\" id=\"uploadZone\" role=\"button\" aria-label=\"\u0e04\u0e25\u0e34\u0e01\u0e2b\u0e23\u0e37\u0e2d\u0e25\u0e32\u0e01\u0e44\u0e1f\u0e25\u0e4c\u0e20\u0e32\u0e1e\u0e21\u0e32\u0e27\u0e32\u0e07\">\r\n        <input type=\"file\" id=\"imageInput\" accept=\"image\/*\" aria-label=\"\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e44\u0e1f\u0e25\u0e4c\u0e20\u0e32\u0e1e\" \/>\r\n        <span class=\"upload-icon\">\ud83d\udcf8<\/span>\r\n        <p class=\"upload-title\">\u0e04\u0e25\u0e34\u0e01\u0e2b\u0e23\u0e37\u0e2d\u0e25\u0e32\u0e01\u0e20\u0e32\u0e1e\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e31\u0e14\u0e44\u0e21\u0e49\u0e21\u0e32\u0e27\u0e32\u0e07\u0e17\u0e35\u0e48\u0e19\u0e35\u0e48<\/p>\r\n        <p class=\"upload-subtitle\">\u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a JPG, PNG, WEBP \u2014 \u0e02\u0e19\u0e32\u0e14\u0e44\u0e21\u0e48\u0e40\u0e01\u0e34\u0e19 10 MB<\/p>\r\n      <\/div>\r\n\r\n      <!-- PREVIEW -->\r\n      <div class=\"preview-area\" id=\"previewArea\">\r\n        <img decoding=\"async\" id=\"previewImg\" src=\"\" alt=\"\u0e20\u0e32\u0e1e\u0e17\u0e35\u0e48\u0e40\u0e25\u0e37\u0e2d\u0e01\" \/>\r\n        <button class=\"preview-clear\" id=\"clearBtn\" aria-label=\"\u0e25\u0e49\u0e32\u0e07\u0e20\u0e32\u0e1e\">\u2715<\/button>\r\n      <\/div>\r\n\r\n      <!-- API URL -->\r\n      <div class=\"api-section\">\r\n        <label class=\"api-label\" for=\"apiUrl\">\r\n          \ud83d\udd17 Woodify + \u0e19\u0e49\u0e2d\u0e07\u0e27\u0e19\u0e32 API (n8n webhook)\r\n        <\/label>\r\n        <input\r\n          type=\"url\"\r\n          id=\"apiUrl\"\r\n          class=\"api-input\"\r\n          placeholder=\"https:\/\/n8n.forest.go.th\/webhook\/wana-wood-scan\"\r\n          value=\"https:\/\/n8n.forest.go.th\/webhook\/wana-wood-scan\"\r\n          autocomplete=\"off\"\r\n          spellcheck=\"false\"\r\n        \/>\r\n      <\/div>\r\n\r\n      <!-- ANALYZE BUTTON -->\r\n      <button class=\"btn-analyze\" id=\"analyzeBtn\" disabled aria-label=\"\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e0a\u0e19\u0e34\u0e14\u0e44\u0e21\u0e49\">\r\n        <div class=\"spinner\"><\/div>\r\n        <span class=\"btn-text\">\ud83d\udd0d \u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e0a\u0e19\u0e34\u0e14\u0e44\u0e21\u0e49<\/span>\r\n      <\/button>\r\n\r\n      <!-- ERROR BOX -->\r\n      <div class=\"error-box\" id=\"errorBox\" role=\"alert\">\r\n        <span>\u26a0\ufe0f<\/span>\r\n        <span id=\"errorMsg\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14<\/span>\r\n      <\/div>\r\n\r\n      <!-- RESULT -->\r\n      <div class=\"result-section\" id=\"resultSection\" aria-live=\"polite\">\r\n\r\n        <!-- TOP RESULT -->\r\n        <div class=\"result-top\" id=\"resultTop\">\r\n          <p class=\"result-label\">\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a<\/p>\r\n          <p class=\"result-wood-name\" id=\"resultWoodName\">\u2014<\/p>\r\n          <p class=\"result-confidence\" id=\"resultConfidence\">\u2014<\/p>\r\n          <span class=\"result-status-badge\" id=\"resultStatus\">\u2014<\/span>\r\n          <div class=\"confidence-bar-wrap\">\r\n            <div class=\"confidence-bar\" id=\"confidenceBar\" style=\"width:0%\"><\/div>\r\n          <\/div>\r\n          <div class=\"uncertain-badge\" id=\"uncertainBadge\">\r\n            \u26a0\ufe0f \u0e04\u0e27\u0e32\u0e21\u0e21\u0e31\u0e48\u0e19\u0e43\u0e08\u0e15\u0e48\u0e33\u0e01\u0e27\u0e48\u0e32 50% \u2014 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e16\u0e48\u0e32\u0e22\u0e20\u0e32\u0e1e\u0e43\u0e2b\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e0a\u0e31\u0e14\u0e02\u0e36\u0e49\u0e19\u0e2b\u0e23\u0e37\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- TOP 3 -->\r\n        <p class=\"result-divider\">\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e44\u0e1b\u0e44\u0e14\u0e49 (Top 3)<\/p>\r\n        <div class=\"top3-list\" id=\"top3List\"><\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div><!-- \/woodify-body -->\r\n\r\n    <!-- FOOTER -->\r\n    <div class=\"woodify-footer\">\r\n      <p class=\"footer-text\">\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49<\/p>\r\n      <div class=\"footer-status\">\r\n        <div class=\"footer-dot\" id=\"statusDot\"><\/div>\r\n        <span id=\"statusText\">\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div><!-- \/woodify-card -->\r\n\r\n  <script>\r\n    \/\/ ===== CONFIG =====\r\n    const DEFAULT_API_URL = 'https:\/\/n8n.forest.go.th\/webhook\/wana-wood-scan';\r\n\r\n    \/\/ ===== ELEMENTS =====\r\n    const imageInput   = document.getElementById('imageInput');\r\n    const uploadZone   = document.getElementById('uploadZone');\r\n    const previewArea  = document.getElementById('previewArea');\r\n    const previewImg   = document.getElementById('previewImg');\r\n    const clearBtn     = document.getElementById('clearBtn');\r\n    const apiUrlInput  = document.getElementById('apiUrl');\r\n    const analyzeBtn   = document.getElementById('analyzeBtn');\r\n    const errorBox     = document.getElementById('errorBox');\r\n    const errorMsg     = document.getElementById('errorMsg');\r\n    const resultSection= document.getElementById('resultSection');\r\n    const resultWoodName = document.getElementById('resultWoodName');\r\n    const resultConfidence = document.getElementById('resultConfidence');\r\n    const resultStatus = document.getElementById('resultStatus');\r\n    const confidenceBar = document.getElementById('confidenceBar');\r\n    const uncertainBadge = document.getElementById('uncertainBadge');\r\n    const top3List     = document.getElementById('top3List');\r\n    const statusDot    = document.getElementById('statusDot');\r\n    const statusText   = document.getElementById('statusText');\r\n\r\n    let selectedFile = null;\r\n\r\n    \/\/ ===== DRAG & DROP =====\r\n    uploadZone.addEventListener('dragover', (e) => {\r\n      e.preventDefault();\r\n      uploadZone.classList.add('drag-over');\r\n    });\r\n\r\n    uploadZone.addEventListener('dragleave', () => {\r\n      uploadZone.classList.remove('drag-over');\r\n    });\r\n\r\n    uploadZone.addEventListener('drop', (e) => {\r\n      e.preventDefault();\r\n      uploadZone.classList.remove('drag-over');\r\n      const file = e.dataTransfer.files[0];\r\n      if (file && file.type.startsWith('image\/')) handleFile(file);\r\n    });\r\n\r\n    \/\/ ===== FILE INPUT =====\r\n    imageInput.addEventListener('change', () => {\r\n      if (imageInput.files[0]) handleFile(imageInput.files[0]);\r\n    });\r\n\r\n    function handleFile(file) {\r\n      if (file.size > 10 * 1024 * 1024) {\r\n        showError('\u0e44\u0e1f\u0e25\u0e4c\u0e20\u0e32\u0e1e\u0e43\u0e2b\u0e0d\u0e48\u0e40\u0e01\u0e34\u0e19 10 MB \u0e01\u0e23\u0e38\u0e13\u0e32\u0e25\u0e14\u0e02\u0e19\u0e32\u0e14\u0e01\u0e48\u0e2d\u0e19');\r\n        return;\r\n      }\r\n      selectedFile = file;\r\n      const reader = new FileReader();\r\n      reader.onload = (e) => {\r\n        previewImg.src = e.target.result;\r\n        previewArea.classList.add('visible');\r\n      };\r\n      reader.readAsDataURL(file);\r\n      analyzeBtn.disabled = false;\r\n      hideError();\r\n      hideResult();\r\n    }\r\n\r\n    \/\/ ===== CLEAR =====\r\n    clearBtn.addEventListener('click', (e) => {\r\n      e.stopPropagation();\r\n      selectedFile = null;\r\n      imageInput.value = '';\r\n      previewImg.src = '';\r\n      previewArea.classList.remove('visible');\r\n      analyzeBtn.disabled = true;\r\n      hideError();\r\n      hideResult();\r\n    });\r\n\r\n    \/\/ ===== ANALYZE =====\r\n    analyzeBtn.addEventListener('click', async () => {\r\n      if (!selectedFile) return;\r\n\r\n      const apiUrl = apiUrlInput.value.trim() || DEFAULT_API_URL;\r\n\r\n      analyzeBtn.classList.add('loading');\r\n      analyzeBtn.disabled = true;\r\n      hideError();\r\n      hideResult();\r\n      setStatus('\u0e01\u0e33\u0e25\u0e31\u0e07\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c...', false);\r\n\r\n      try {\r\n        \/\/ \u0e41\u0e1b\u0e25\u0e07\u0e20\u0e32\u0e1e\u0e40\u0e1b\u0e47\u0e19 base64 \u0e41\u0e25\u0e49\u0e27\u0e2a\u0e48\u0e07 JSON \u0e44\u0e1b n8n\r\n        const reader = new FileReader();\r\n        const imageBase64 = await new Promise((resolve, reject) => {\r\n          reader.onload = (e) => resolve(e.target.result); \/\/ data:image\/...;base64,XXX\r\n          reader.onerror = reject;\r\n          reader.readAsDataURL(selectedFile);\r\n        });\r\n\r\n        const response = await fetch(apiUrl, {\r\n          method: 'POST',\r\n          headers: { 'Content-Type': 'application\/json' },\r\n          body: JSON.stringify({\r\n            image_base64: imageBase64,  \/\/ n8n endpoint\r\n            session_id: 'widget-' + Date.now()\r\n          }),\r\n        });\r\n\r\n        if (!response.ok) {\r\n          const errText = await response.text();\r\n          throw new Error(`Server \u0e15\u0e2d\u0e1a\u0e01\u0e25\u0e31\u0e1a HTTP ${response.status}: ${errText}`);\r\n        }\r\n\r\n        const data = await response.json();\r\n\r\n        if (!data.success) {\r\n          throw new Error(data.error || '\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e08\u0e32\u0e01 API');\r\n        }\r\n\r\n        renderResult(data);\r\n        setStatus('\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08', true);\r\n\r\n      } catch (err) {\r\n        let msg = err.message || '\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d API \u0e44\u0e14\u0e49';\r\n        if (msg.includes('Failed to fetch') || msg.includes('NetworkError')) {\r\n          msg = '\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d n8n \u0e44\u0e14\u0e49 \u2014 \u0e01\u0e23\u0e38\u0e13\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e27\u0e48\u0e32 workflow wana-wood-scan \u0e23\u0e31\u0e19\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19 n8n';\r\n        }\r\n        showError(msg);\r\n        setStatus('\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14', true);\r\n      } finally {\r\n        analyzeBtn.classList.remove('loading');\r\n        analyzeBtn.disabled = false;\r\n      }\r\n    });\r\n\r\n    \/\/ ===== RENDER RESULT =====\r\n    \/\/ n8n response: { success, text (Gemma summary), top_prediction, is_confident }\r\n    \/\/ direct woodify response: { success, top_prediction, top_3, is_confident }\r\n    function renderResult(data) {\r\n      const top = data.top_prediction;\r\n      const top3 = data.top_3 || (top ? [top] : []);\r\n      const is_confident = data.is_confident;\r\n\r\n      resultWoodName.textContent = top ? top.wood : '\u2014';\r\n      resultConfidence.textContent = top ? `\u0e04\u0e27\u0e32\u0e21\u0e21\u0e31\u0e48\u0e19\u0e43\u0e08 ${top.percentage.toFixed(1)}%` : '\u2014';\r\n      resultStatus.textContent = top ? top.status : '\u2014';\r\n\r\n      \/\/ Animate bar\r\n      requestAnimationFrame(() => {\r\n        confidenceBar.style.width = top ? `${top.percentage}%` : '0%';\r\n      });\r\n\r\n      \/\/ Uncertain badge\r\n      if (!is_confident) {\r\n        uncertainBadge.classList.add('visible');\r\n      } else {\r\n        uncertainBadge.classList.remove('visible');\r\n      }\r\n\r\n      \/\/ \u0e41\u0e2a\u0e14\u0e07 Gemma summary (text \u0e08\u0e32\u0e01 n8n) \u0e16\u0e49\u0e32\u0e21\u0e35\r\n      if (data.text) {\r\n        const existingWana = document.getElementById('wanaText');\r\n        if (existingWana) existingWana.remove();\r\n        const wanaDiv = document.createElement('div');\r\n        wanaDiv.id = 'wanaText';\r\n        wanaDiv.style.cssText = 'margin-top:14px;background:rgba(45,149,45,0.10);border:1px solid rgba(61,181,61,0.25);border-radius:10px;padding:14px 16px;font-size:0.88rem;color:var(--green-100);line-height:1.7;white-space:pre-wrap;';\r\n        wanaDiv.innerHTML = `<span style=\"font-size:0.72rem;color:var(--text-secondary);display:block;margin-bottom:6px\">\ud83c\udf3f \u0e19\u0e49\u0e2d\u0e07\u0e27\u0e19\u0e32\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c<\/span>${data.text}`;\r\n        document.getElementById('resultTop').appendChild(wanaDiv);\r\n      }\r\n\r\n      \/\/ TOP 3\r\n      top3List.innerHTML = '';\r\n      top3.forEach((item, idx) => {\r\n        const rankLabels = ['\ud83e\udd47', '\ud83e\udd48', '\ud83e\udd49'];\r\n        const isGold = idx === 0;\r\n\r\n        const el = document.createElement('div');\r\n        el.className = 'top3-item';\r\n        el.innerHTML = `\r\n          <div class=\"top3-rank ${isGold ? 'gold' : ''}\">${rankLabels[idx] || idx + 1}<\/div>\r\n          <div class=\"top3-info\">\r\n            <p class=\"top3-name\">${item.wood}<\/p>\r\n            <p class=\"top3-status\">${item.status}<\/p>\r\n            <div class=\"top3-bar-wrap\">\r\n              <div class=\"top3-bar\" style=\"width:${item.percentage}%\"><\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <span class=\"top3-pct\">${item.percentage.toFixed(1)}%<\/span>\r\n        `;\r\n        top3List.appendChild(el);\r\n      });\r\n\r\n      resultSection.classList.add('visible');\r\n    }\r\n\r\n    \/\/ ===== HELPERS =====\r\n    function showError(msg) {\r\n      errorMsg.textContent = msg;\r\n      errorBox.classList.add('visible');\r\n    }\r\n\r\n    function hideError() {\r\n      errorBox.classList.remove('visible');\r\n    }\r\n\r\n    function hideResult() {\r\n      resultSection.classList.remove('visible');\r\n      confidenceBar.style.width = '0%';\r\n    }\r\n\r\n    function setStatus(text, done) {\r\n      statusText.textContent = text;\r\n      statusDot.style.animationPlayState = done ? 'paused' : 'running';\r\n      statusDot.style.background = done\r\n        ? (text.includes('\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14') ? '#f66' : 'var(--green-400)')\r\n        : 'var(--gold-400)';\r\n    }\r\n\r\n    \/\/ ===== PING API ON LOAD =====\r\n    (async function pingApi() {\r\n      const base = apiUrlInput.value.replace('\/wana-wood-scan', '').replace('\/webhook\/', '\/webhook\/');\r\n      \/\/ n8n: ping root to check reachability\r\n      const pingUrl = apiUrlInput.value.includes('n8n') ? 'https:\/\/n8n.forest.go.th\/' : apiUrlInput.value.replace('\/analyze', '\/');\r\n      try {\r\n        const r = await fetch(pingUrl, { signal: AbortSignal.timeout(3000) });\r\n        setStatus(r.ok ? 'API \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19' : 'API \u0e15\u0e2d\u0e1a\u0e2a\u0e19\u0e2d\u0e07\u0e1c\u0e34\u0e14\u0e1b\u0e01\u0e15\u0e34', true);\r\n      } catch {\r\n        setStatus('\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d API', true);\r\n        statusDot.style.background = '#f99';\r\n      }\r\n    })();\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf33 \u0e19\u0e49\u0e2d\u0e07\u0e27\u0e19\u0e32 AI \u0e41\u0e0a\u0e17\u0e1a\u0e2d\u0e17\u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49 \u2022 \u0e15\u0e2d\u0e1a\u0e17\u0e38\u0e01\u0e04\u0e33\u0e16\u0e32\u0e21 Woodify AI \u2014 [&hellip;]<\/p>\n","protected":false},"author":282,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[56],"tags":[],"class_list":["post-9340","post","type-post","status-publish","format-standard","category-km","czr-hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>(\u0e2d\u0e22\u0e39\u0e48\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a) \u0e27\u0e19\u0e32 V2.0 Chatbot \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49 - \u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.forest.go.th\/it\/blog\/wana2\/\" \/>\n<meta property=\"og:locale\" content=\"th_TH\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"(\u0e2d\u0e22\u0e39\u0e48\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a) \u0e27\u0e19\u0e32 V2.0 Chatbot \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49 - \u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49\" \/>\n<meta property=\"og:description\" content=\"\ud83c\udf33 \u0e19\u0e49\u0e2d\u0e07\u0e27\u0e19\u0e32 AI \u0e41\u0e0a\u0e17\u0e1a\u0e2d\u0e17\u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49 \u2022 \u0e15\u0e2d\u0e1a\u0e17\u0e38\u0e01\u0e04\u0e33\u0e16\u0e32\u0e21 Woodify AI \u2014 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.forest.go.th\/it\/blog\/wana2\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-08T09:16:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-16T08:48:44+00:00\" \/>\n<meta name=\"author\" content=\"prapanpong\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"prapanpong\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 \u0e19\u0e32\u0e17\u0e35\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/blog\\\/wana2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/blog\\\/wana2\\\/\"},\"author\":{\"name\":\"prapanpong\",\"@id\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/#\\\/schema\\\/person\\\/516ca4320c7d22afdf72b62294c91dbc\"},\"headline\":\"(\u0e2d\u0e22\u0e39\u0e48\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a) \u0e27\u0e19\u0e32 V2.0 Chatbot \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49\",\"datePublished\":\"2026-07-08T09:16:33+00:00\",\"dateModified\":\"2026-09-16T08:48:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/blog\\\/wana2\\\/\"},\"wordCount\":18,\"publisher\":{\"@id\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/#organization\"},\"articleSection\":[\"\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\"],\"inLanguage\":\"th\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/blog\\\/wana2\\\/\",\"url\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/blog\\\/wana2\\\/\",\"name\":\"(\u0e2d\u0e22\u0e39\u0e48\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a) \u0e27\u0e19\u0e32 V2.0 Chatbot \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49 - \u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/#website\"},\"datePublished\":\"2026-07-08T09:16:33+00:00\",\"dateModified\":\"2026-09-16T08:48:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/blog\\\/wana2\\\/#breadcrumb\"},\"inLanguage\":\"th\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.forest.go.th\\\/it\\\/blog\\\/wana2\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/blog\\\/wana2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"(\u0e2d\u0e22\u0e39\u0e48\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a) \u0e27\u0e19\u0e32 V2.0 Chatbot \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/\",\"name\":\"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49\",\"description\":\"\u0e43\u0e2b\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e14\u0e49\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"th\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/#organization\",\"name\":\"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49\",\"url\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"th\",\"@id\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/wp-content\\\/uploads\\\/sites\\\/21\\\/2023\\\/02\\\/new-rfd-web-logo-it.png\",\"contentUrl\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/wp-content\\\/uploads\\\/sites\\\/21\\\/2023\\\/02\\\/new-rfd-web-logo-it.png\",\"width\":720,\"height\":200,\"caption\":\"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49\"},\"image\":{\"@id\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/#\\\/schema\\\/person\\\/516ca4320c7d22afdf72b62294c91dbc\",\"name\":\"prapanpong\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"th\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/29958b8a1247925ace979ba8150d4a6a6f2ec7974431c62261b0f55d5153556b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/29958b8a1247925ace979ba8150d4a6a6f2ec7974431c62261b0f55d5153556b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/29958b8a1247925ace979ba8150d4a6a6f2ec7974431c62261b0f55d5153556b?s=96&d=mm&r=g\",\"caption\":\"prapanpong\"},\"url\":\"https:\\\/\\\/www.forest.go.th\\\/it\\\/blog\\\/author\\\/prapanpong\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"(\u0e2d\u0e22\u0e39\u0e48\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a) \u0e27\u0e19\u0e32 V2.0 Chatbot \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49 - \u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.forest.go.th\/it\/blog\/wana2\/","og_locale":"th_TH","og_type":"article","og_title":"(\u0e2d\u0e22\u0e39\u0e48\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a) \u0e27\u0e19\u0e32 V2.0 Chatbot \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49 - \u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49","og_description":"\ud83c\udf33 \u0e19\u0e49\u0e2d\u0e07\u0e27\u0e19\u0e32 AI \u0e41\u0e0a\u0e17\u0e1a\u0e2d\u0e17\u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49 \u2022 \u0e15\u0e2d\u0e1a\u0e17\u0e38\u0e01\u0e04\u0e33\u0e16\u0e32\u0e21 Woodify AI \u2014 [&hellip;]","og_url":"https:\/\/www.forest.go.th\/it\/blog\/wana2\/","og_site_name":"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49","article_published_time":"2026-07-08T09:16:33+00:00","article_modified_time":"2026-09-16T08:48:44+00:00","author":"prapanpong","twitter_card":"summary_large_image","twitter_misc":{"Written by":"prapanpong","Est. reading time":"2 \u0e19\u0e32\u0e17\u0e35"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.forest.go.th\/it\/blog\/wana2\/#article","isPartOf":{"@id":"https:\/\/www.forest.go.th\/it\/blog\/wana2\/"},"author":{"name":"prapanpong","@id":"https:\/\/www.forest.go.th\/it\/#\/schema\/person\/516ca4320c7d22afdf72b62294c91dbc"},"headline":"(\u0e2d\u0e22\u0e39\u0e48\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a) \u0e27\u0e19\u0e32 V2.0 Chatbot \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49","datePublished":"2026-07-08T09:16:33+00:00","dateModified":"2026-09-16T08:48:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.forest.go.th\/it\/blog\/wana2\/"},"wordCount":18,"publisher":{"@id":"https:\/\/www.forest.go.th\/it\/#organization"},"articleSection":["\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49"],"inLanguage":"th"},{"@type":"WebPage","@id":"https:\/\/www.forest.go.th\/it\/blog\/wana2\/","url":"https:\/\/www.forest.go.th\/it\/blog\/wana2\/","name":"(\u0e2d\u0e22\u0e39\u0e48\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a) \u0e27\u0e19\u0e32 V2.0 Chatbot \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49 - \u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49","isPartOf":{"@id":"https:\/\/www.forest.go.th\/it\/#website"},"datePublished":"2026-07-08T09:16:33+00:00","dateModified":"2026-09-16T08:48:44+00:00","breadcrumb":{"@id":"https:\/\/www.forest.go.th\/it\/blog\/wana2\/#breadcrumb"},"inLanguage":"th","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.forest.go.th\/it\/blog\/wana2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.forest.go.th\/it\/blog\/wana2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.forest.go.th\/it\/"},{"@type":"ListItem","position":2,"name":"(\u0e2d\u0e22\u0e39\u0e48\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a) \u0e27\u0e19\u0e32 V2.0 Chatbot \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49"}]},{"@type":"WebSite","@id":"https:\/\/www.forest.go.th\/it\/#website","url":"https:\/\/www.forest.go.th\/it\/","name":"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49","description":"\u0e43\u0e2b\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e14\u0e49\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28","publisher":{"@id":"https:\/\/www.forest.go.th\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.forest.go.th\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"th"},{"@type":"Organization","@id":"https:\/\/www.forest.go.th\/it\/#organization","name":"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49","url":"https:\/\/www.forest.go.th\/it\/","logo":{"@type":"ImageObject","inLanguage":"th","@id":"https:\/\/www.forest.go.th\/it\/#\/schema\/logo\/image\/","url":"https:\/\/www.forest.go.th\/it\/wp-content\/uploads\/sites\/21\/2023\/02\/new-rfd-web-logo-it.png","contentUrl":"https:\/\/www.forest.go.th\/it\/wp-content\/uploads\/sites\/21\/2023\/02\/new-rfd-web-logo-it.png","width":720,"height":200,"caption":"\u0e28\u0e39\u0e19\u0e22\u0e4c\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23 \u0e01\u0e23\u0e21\u0e1b\u0e48\u0e32\u0e44\u0e21\u0e49"},"image":{"@id":"https:\/\/www.forest.go.th\/it\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.forest.go.th\/it\/#\/schema\/person\/516ca4320c7d22afdf72b62294c91dbc","name":"prapanpong","image":{"@type":"ImageObject","inLanguage":"th","@id":"https:\/\/secure.gravatar.com\/avatar\/29958b8a1247925ace979ba8150d4a6a6f2ec7974431c62261b0f55d5153556b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/29958b8a1247925ace979ba8150d4a6a6f2ec7974431c62261b0f55d5153556b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/29958b8a1247925ace979ba8150d4a6a6f2ec7974431c62261b0f55d5153556b?s=96&d=mm&r=g","caption":"prapanpong"},"url":"https:\/\/www.forest.go.th\/it\/blog\/author\/prapanpong\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.forest.go.th\/it\/wp-json\/wp\/v2\/posts\/9340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.forest.go.th\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.forest.go.th\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.forest.go.th\/it\/wp-json\/wp\/v2\/users\/282"}],"replies":[{"embeddable":true,"href":"https:\/\/www.forest.go.th\/it\/wp-json\/wp\/v2\/comments?post=9340"}],"version-history":[{"count":15,"href":"https:\/\/www.forest.go.th\/it\/wp-json\/wp\/v2\/posts\/9340\/revisions"}],"predecessor-version":[{"id":9591,"href":"https:\/\/www.forest.go.th\/it\/wp-json\/wp\/v2\/posts\/9340\/revisions\/9591"}],"wp:attachment":[{"href":"https:\/\/www.forest.go.th\/it\/wp-json\/wp\/v2\/media?parent=9340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.forest.go.th\/it\/wp-json\/wp\/v2\/categories?post=9340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.forest.go.th\/it\/wp-json\/wp\/v2\/tags?post=9340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}