From e612fbec8ea885ed940f24302e66a9db2db60fa6 Mon Sep 17 00:00:00 2001
From: Ryochobi <ryouran27@gmail.com>
Date: Sat, 22 Aug 2026 05:52:20 +0800
Subject: [PATCH] Added some stuff

---
 .gitignore                                    |   3 +-
 iidxwidget-app/controller/controllerReader.js | 261 +++++-------------
 iidxwidget-app/localization/translations.js   |  46 +++
 iidxwidget-app/main.js                        | 189 +++++++------
 iidxwidget-app/package.json                   |   9 +-
 iidxwidget-app/preload.js                     |   8 +-
 iidxwidget-app/renderer/chatter/chatter.html  |   8 +-
 iidxwidget-app/renderer/chatter/chatter.js    |   5 +-
 iidxwidget-app/renderer/logs/logs.html        |   4 +-
 .../renderer/settings/settings.html           |  83 ++++--
 iidxwidget-app/renderer/settings/settings.js  |  72 ++++-
 iidxwidget-app/renderer/settings/style.css    |   5 +-
 iidxwidget-app/renderer/shared/i18n.js        |  33 +++
 iidxwidget-app/renderer/widget/index.html     |   2 +-
 iidxwidget-app/renderer/widget/index.js       |  43 ++-
 iidxwidget-app/renderer/widget/style.css      |   5 +-
 iidxwidget-app/settings.json                  |  18 +-
 iidxwidget-app/test/controllerReader.test.js  |  40 +++
 iidxwidget-app/test/localization.test.js      |  17 ++
 19 files changed, 508 insertions(+), 343 deletions(-)
 create mode 100644 iidxwidget-app/localization/translations.js
 create mode 100644 iidxwidget-app/renderer/shared/i18n.js
 create mode 100644 iidxwidget-app/test/controllerReader.test.js
 create mode 100644 iidxwidget-app/test/localization.test.js

diff --git a/.gitignore b/.gitignore
index 3a95d6f..0003cd1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 /iidxwidget-app/node_modules
-/iidxwidget-app/dist
\ No newline at end of file
+/iidxwidget-app/dist
+/iidxwidget-app/dist-*
diff --git a/iidxwidget-app/controller/controllerReader.js b/iidxwidget-app/controller/controllerReader.js
index 7964cfe..1a99fd5 100644
--- a/iidxwidget-app/controller/controllerReader.js
+++ b/iidxwidget-app/controller/controllerReader.js
@@ -1,202 +1,73 @@
-const HID = require('node-hid');
-let lastButtonByte = 0;
-let isLR2Active = false;
-let lr2DetectEnabled = false;
-let lr2PatternCount = 0;
-let normalPatternCount = 0;
-let currentDiscRaw = 0;
-let lastLR2Direction = 'neutral';
-const LR2_ACTIVATE_THRESHOLD = 120;
-const LR2_DEACTIVATE_THRESHOLD = 3;
-
-function startControllerReader(mode, onDataCallback, options = {}) {
-  // 🔁 상태 초기화
-  isLR2Active = false;
-  lr2PatternCount = 0;
-  normalPatternCount = 0;
-  currentDiscRaw = 0;
-  lastLR2Direction = 'neutral';
-  lr2DetectEnabled = !!options.lr2ModeEnabled;
-  const devices = HID.devices();
-
-  const deviceInfo = devices.find(d => {
-    if (mode === 'PHOENIXWAN') {
-      return d.vendorId === 0x1CCF && d.productId === 0x8048 && d.interface === 1;
-    } else if (mode === 'FPS EMP Gen2') {
-      return d.vendorId === 0x1CCF && d.productId === 0x8048 && d.interface === 0 && d.usagePage === 1;
-    }
-    return false;
-  });
-
-  if (!deviceInfo) {
-    console.error(`❌ ${mode} 장치를 찾을 수 없습니다.`);
-    return null;
-  }
-
-  console.log(`🎮 ${mode} 연결 시도:`, deviceInfo);
-
-  let device;
-  try {
-    device = new HID.HID(deviceInfo.path);
-    console.log(`🟢 ${mode} 연결 성공`);
-  } catch (e) {
-    console.error(`❌ ${mode} 장치 열기 실패:`, e);
-    return null;
-  }
-
-
-  device.on('data', buffer => {
-  try {
-    if (!device || typeof device.read !== 'function') return;
-
-    const xRaw = buffer[0];
-    if (lr2DetectEnabled) detectLR2Mode(buffer, onDataCallback);
-    const parsed = parseControllerData(buffer);
-
-    if (isLR2Active) {
-      const filtered = parsed.filter(event => !(event.type === 'axis' && event.axis === 'X'));
-
-      let direction = 'neutral';
-      if (xRaw === 0x80) direction = '+';
-      else if (xRaw === 0x7F) direction = '-';
-
-      if (direction !== 'neutral' && direction !== lastLR2Direction) {
-        lastLR2Direction = direction;
-
-        if (direction === '+') {
-          currentDiscRaw = (currentDiscRaw + 5) % 256;
-        } else if (direction === '-') {
-          currentDiscRaw = (currentDiscRaw - 5 + 256) % 256;
-        }
-
-        filtered.push({
-          type: 'axis',
-          axis: 'X',
-          direction,
-          discRaw: currentDiscRaw,
-          timestamp: Date.now()
-        });
-
-        onDataCallback(filtered);
-      } else if (direction === 'neutral' && lastLR2Direction !== 'neutral') {
-        lastLR2Direction = 'neutral';
-        filtered.push({
-          type: 'axis',
-          axis: 'X',
-          direction: 'neutral',
-          discRaw: currentDiscRaw,
-          timestamp: Date.now()
-        });
-        onDataCallback(filtered);
-      } else {
-        // 버튼만 눌린 경우 처리
-        if (filtered.length > 0) {
-          onDataCallback(filtered);
-        }
-      }
-      return;
-    }
-
-    // ✅ 일반 모드일 경우 parsed 원본을 그대로 반영
-    if (parsed.length > 0) onDataCallback(parsed);
-
-  } catch (err) {
-    if (err?.message?.includes('Object has been destroyed')) {
-      console.warn('⚠️ HID device destroyed, ignoring further data events.');
-    } else {
-      console.error('❌ Error in device.on("data") handler:', err);
-    }
-  }
-});
-
-
-  device.on('error', err => {
-    console.error('❌ 디바이스 에러:', err);
-  });
-
-  return {
-    close: () => {
-      try {
-        device.removeAllListeners('data');
-        device.removeAllListeners('error');
-        device.close();
-        console.log('🛑 HID 장치 안전하게 닫힘');
-      } catch (e) {
-        console.error('❌ HID 닫기 실패:', e);
-      }
-    }
-  };
-
+let hidModule;
+function getHID() { if (!hidModule) hidModule = require('node-hid'); return hidModule; }
+const isPhoenix = d => d.vendorId === 0x1CCF && d.productId === 0x8048 && d.interface === 1;
+const isFps = d => d.vendorId === 0x1CCF && d.productId === 0x8048 && d.interface === 0 && d.usagePage === 1;
 
+function findExactDedicatedDevice(devices, profile) {
+  return devices.find(d => d.path && (profile === 'PHOENIXWAN' ? isPhoenix(d) : profile === 'FPS EMP Gen2' ? isFps(d) : false));
 }
-
-function detectLR2Mode(buffer, logCallback) {
-  const xRaw = buffer[0];
-  const isStatic = [0x80, 0x7F, 0x00].includes(xRaw);
-
-  if (isStatic) {
-    if (lr2PatternCount === 0) lr2FirstStaticTime = Date.now();
-    lr2PatternCount++;
-    normalPatternCount = 0;
-
-    const duration = Date.now() - lr2FirstStaticTime;
-
-    if (!isLR2Active && lr2PatternCount >= LR2_ACTIVATE_THRESHOLD && duration < 500) {
-      isLR2Active = true;
-      console.log('🔵 LR2 모드 활성화됨');
-      if (typeof logCallback === 'function') {
-        logCallback([{ type: 'log', message: '🔵 LR2 모드 활성화됨', timestamp: Date.now() }]);
-      }
-    }
-  } else {
-    lr2PatternCount = 0;
-    normalPatternCount++;
-    lr2FirstStaticTime = null;
-
-    if (isLR2Active && normalPatternCount >= LR2_DEACTIVATE_THRESHOLD) {
-      isLR2Active = false;
-      console.log('⚪ LR2 모드 비활성화됨');
-      if (typeof logCallback === 'function') {
-        logCallback([{ type: 'log', message: '⚪ LR2 모드 비활성화됨', timestamp: Date.now() }]);
-      }
-    }
-  }
+function findAutoController(devices) {
+  const usable = devices.filter(d => d.path);
+  const phoenix = usable.find(isPhoenix); if (phoenix) return { device: phoenix, parser: 'PHOENIXWAN' };
+  const fps = usable.find(isFps); if (fps) return { device: fps, parser: 'FPS_EMP' };
+  const terms = /phoenixwan|fps|emp|infinitas|inf&bms|iidx|beatmania|yuancon|gamo2/i;
+  const named = usable.find(d => terms.test(`${d.product || ''} ${d.manufacturer || ''}`) && !(d.usagePage === 1 && (d.usage === 2 || d.usage === 6)));
+  if (named) return { device: named, parser: 'GENERIC' };
+  const generic = usable.find(d => d.usagePage === 1 && (d.usage === 4 || d.usage === 5));
+  return generic ? { device: generic, parser: 'GENERIC' } : null;
 }
-
-function parseControllerData(buffer) {
-  const events = [];
-  const buttonByte = buffer[2];
-  const now = Date.now();
-
-  for (let i = 0; i < 7; i++) {
-    const mask = 1 << i;
-    const wasPressed = (lastButtonByte & mask) !== 0;
-    const isPressed = (buttonByte & mask) !== 0;
-
-    if (wasPressed !== isPressed) {
-      events.push({
-        type: 'button',
-        button: `button ${i + 1}`,
-        pressed: isPressed,
-        timestamp: now
-      });
+function parseGenericControllerData(buffer, mapping = {}, state = { previousButtons: 0 }) {
+  if (!buffer?.length) return [];
+  if (!Number.isInteger(state.currentDiscRaw)) state.currentDiscRaw = 128;
+  const offset = buffer[0] !== 0 ? 1 : 0;
+  let buttons = 0;
+  for (let i = 0; i < Math.min(4, buffer.length - offset); i++) buttons = (buttons | ((buffer[offset + i] || 0) << (i * 8))) >>> 0;
+  const changed = (buttons ^ (state.previousButtons >>> 0)) >>> 0, events = [], timestamp = Date.now();
+  for (let i = 0; i < 32; i++) {
+    const mask = (1 << i) >>> 0;
+    if (!(changed & mask)) continue;
+    const physicalButton = i + 1, pressed = !!(buttons & mask);
+    events.push({ type: 'physical-button', physicalButton, pressed, timestamp });
+    const logical = Object.keys(mapping).find(key => Number(mapping[key]) === physicalButton);
+    if (/^[1-7]$/.test(logical)) events.push({ type: 'button', button: `button ${logical}`, physicalButton, pressed, timestamp });
+    else if (pressed && (logical === 'SCup' || logical === 'SCdown')) {
+      state.currentDiscRaw = (state.currentDiscRaw + (logical === 'SCup' ? 2 : -2) + 256) % 256;
+      events.push({ type: 'axis', axis: 'X', direction: logical === 'SCup' ? '+' : '-', discRaw: state.currentDiscRaw, physicalButton, timestamp });
     }
   }
-
-  lastButtonByte = buttonByte;
-
-  const xRaw = buffer[0];
-  const direction = xRaw < 100 ? '-' : xRaw > 150 ? '+' : 'neutral';
-
-  events.push({
-    type: 'axis',
-    axis: 'X',
-    direction,
-    discRaw: xRaw,
-    timestamp: now
-  });
-
+  state.previousButtons = buttons;
   return events;
 }
-
-module.exports = { startControllerReader };
+function createDedicatedParserState() { return { lastButtonByte: 0, isLR2Active: false, lr2DetectEnabled: false, lr2PatternCount: 0, normalPatternCount: 0, lr2FirstStaticTime: null, currentDiscRaw: 0, lastLR2Direction: 'neutral' }; }
+function parseControllerData(buffer, state) {
+  const events = [], buttonByte = buffer[2], timestamp = Date.now();
+  for (let i = 0; i < 7; i++) { const mask = 1 << i, pressed = !!(buttonByte & mask); if (!!(state.lastButtonByte & mask) !== pressed) events.push({ type: 'button', button: `button ${i + 1}`, pressed, timestamp }); }
+  state.lastButtonByte = buttonByte;
+  const xRaw = buffer[0]; events.push({ type: 'axis', axis: 'X', direction: xRaw < 100 ? '-' : xRaw > 150 ? '+' : 'neutral', discRaw: xRaw, timestamp });
+  return events;
+}
+function detectLR2Mode(buffer, callback, state) {
+  const isStatic = [0x80, 0x7F, 0x00].includes(buffer[0]);
+  if (isStatic) { if (!state.lr2PatternCount) state.lr2FirstStaticTime = Date.now(); state.lr2PatternCount++; state.normalPatternCount = 0; if (!state.isLR2Active && state.lr2PatternCount >= 120 && Date.now() - state.lr2FirstStaticTime < 500) { state.isLR2Active = true; callback?.([{ type: 'log', message: '🔵 LR2 모드 활성화됨', timestamp: Date.now() }]); } }
+  else { state.lr2PatternCount = 0; state.normalPatternCount++; state.lr2FirstStaticTime = null; if (state.isLR2Active && state.normalPatternCount >= 3) { state.isLR2Active = false; callback?.([{ type: 'log', message: '⚪ LR2 모드 비활성화됨', timestamp: Date.now() }]); } }
+}
+function handleDedicatedData(buffer, callback, state) {
+  const xRaw = buffer[0]; if (state.lr2DetectEnabled) detectLR2Mode(buffer, callback, state);
+  const parsed = parseControllerData(buffer, state); if (!state.isLR2Active) { if (parsed.length) callback(parsed); return; }
+  const filtered = parsed.filter(e => !(e.type === 'axis' && e.axis === 'X')); let direction = xRaw === 0x80 ? '+' : xRaw === 0x7F ? '-' : 'neutral';
+  if (direction !== 'neutral' && direction !== state.lastLR2Direction) { state.lastLR2Direction = direction; state.currentDiscRaw = (state.currentDiscRaw + (direction === '+' ? 5 : -5) + 256) % 256; filtered.push({ type: 'axis', axis: 'X', direction, discRaw: state.currentDiscRaw, timestamp: Date.now() }); }
+  else if (direction === 'neutral' && state.lastLR2Direction !== 'neutral') { state.lastLR2Direction = 'neutral'; filtered.push({ type: 'axis', axis: 'X', direction, discRaw: state.currentDiscRaw, timestamp: Date.now() }); }
+  if (filtered.length) callback(filtered);
+}
+function openReader(selection, callback, options) {
+  const logger = options.logger || ((level, code, details) => console[level]?.(code, details || '')); let device;
+  try { const HID = getHID(); device = new HID.HID(selection.device.path); logger('log', 'connected', { profile: options.profile }); } catch (error) { logger('error', 'openFailed', { profile: options.profile, error }); return null; }
+  const dedicatedState = createDedicatedParserState(); dedicatedState.lr2DetectEnabled = selection.parser !== 'GENERIC' && !!options.lr2ModeEnabled;
+  const genericState = { previousButtons: 0, currentDiscRaw: 128 };
+  device.on('data', buffer => { try { if (selection.parser === 'GENERIC') { const events = parseGenericControllerData(buffer, options.genericMapping, genericState); if (events.length) callback(events); } else handleDedicatedData(buffer, callback, dedicatedState); } catch (error) { logger('error', 'dataError', { error }); } });
+  device.on('error', error => logger('error', 'deviceError', { error }));
+  return { parser: selection.parser, close() { try { device.removeAllListeners(); device.close(); } catch (error) { logger('error', 'closeFailed', { error }); } } };
+}
+function startControllerReader(profile, callback, options = {}) { const device = findExactDedicatedDevice(getHID().devices(), profile); if (!device) { options.logger?.('error', 'notFound', { profile }); return null; } return openReader({ device, parser: profile === 'PHOENIXWAN' ? 'PHOENIXWAN' : 'FPS_EMP' }, callback, { ...options, profile }); }
+function startAutoControllerReader(callback, options = {}) { const selection = findAutoController(getHID().devices()); if (!selection) { options.logger?.('error', 'notFound', { profile: 'AUTO' }); return null; } return openReader(selection, callback, { ...options, profile: 'AUTO' }); }
+module.exports = { startControllerReader, startAutoControllerReader, findExactDedicatedDevice, findAutoController, parseGenericControllerData, parseControllerData, createDedicatedParserState };
diff --git a/iidxwidget-app/localization/translations.js b/iidxwidget-app/localization/translations.js
new file mode 100644
index 0000000..879c366
--- /dev/null
+++ b/iidxwidget-app/localization/translations.js
@@ -0,0 +1,46 @@
+const translations = {
+  ko: {
+    menu: { main: '메뉴', language: 'Language', settings: '설정', logs: '로그', uploadCount: '타건 기록 서버로 전송', chatter: '채터링 감지', about: '정보', contributors: '기여자', checkUpdates: '업데이트 확인', restart: '재시작', quit: '끝내기' },
+    common: { ok: '확인', yes: '예', no: '아니오', later: '다음에 하기', error: '오류', notice: '알림' },
+    about: { message: 'IIDXwidget v{version}\n개발자: Sadang\nhttps://github.com/Coldlapse/IIDXwidget', contributors: '기여자 : rhombus9, 멘탈바사삭' },
+    upload: { noToken: 'API 토큰이 설정되지 않았습니다.', noData: '전송할 타건 기록이 없습니다.', confirmTitle: '타건 기록 전송 확인', confirm: '현재 타건 수 {count}회를 서버로 전송합니다.\nOBS의 수치는 그대로 남고, 앱 화면의 타건 수치는 0으로 초기화됩니다. 계속하시겠습니까?', failed: '전송 실패', invalidToken: '잘못된 토큰입니다.', success: '전송 성공', successMessage: '완료되었습니다. (일일 총 타건 수: {count})', error: '오류가 발생했습니다: {message}' },
+    update: { availableTitle: '업데이트 알림', available: '새 버전 {version} 이(가) 있습니다!\n\n변경사항:\n{notes}', update: '업데이트', skip: '이번 버전 스킵', current: '현재 최신 버전입니다.', errorTitle: '업데이트 오류', error: '업데이트 확인 중 오류 발생:\n{message}', readyTitle: '업데이트 준비 완료', ready: '업데이트가 다운로드되었습니다.\n지금 재시작하고 설치할까요?', restartNow: '지금 재시작', later: '나중에' },
+    controller: { notFound: '{profile} 장치를 찾을 수 없습니다.', connecting: '{profile} 연결 시도', connected: '{profile} 연결 성공', openFailed: '{profile} 장치 열기 실패', deviceError: '디바이스 오류', closed: 'HID 장치 안전하게 닫힘', closeFailed: 'HID 닫기 실패', dataError: '컨트롤러 데이터 처리 오류' },
+    settings: { title: '설정', app: '앱 기본 설정', autoLaunch: 'Windows 시작 시 자동 실행', promo: '위젯 홍보 박스 표시', controllerProfile: '컨트롤러 프로필', auto: '자동 감지', keyboard: '키보드', apiToken: 'beatmania.app 타건 기록 토큰', apiPlaceholder: '웹사이트에서 발급받은 토큰 입력', lr2: 'LR2 모드 감지 (주작콘 전용)', keyboardMapping: '키보드 매핑', genericMapping: 'AUTO 일반 컨트롤러 매핑', genericHelp: 'Auto-detect를 저장한 뒤 설정을 다시 열고, 각 필드를 클릭한 다음 원하는 컨트롤러 버튼을 누르세요. 마지막에 저장을 누르세요.', logicalKey: 'IIDX 키 {key}', turntableClockwise: '턴테이블 시계 방향', turntableCounterclockwise: '턴테이블 반시계 방향', listening: '{key}: 버튼 입력 대기 중...', mapped: '{key}에 물리 버튼 {button} 매핑 완료', serverPort: '서버 포트', websocketPort: '웹소켓 포트', infoPosition: '세션 정보 표시 위치', top: '상단', bottom: '하단', none: '없음', buttonLayout: '버튼 레이아웃', globalMA: '전체 Release 수집 표본 갯수 (수치가 높을수록 변화에 둔감)', perButtonMA: '버튼별 Release 수집 표본 갯수 (수치가 높을수록 변화에 둔감)', appearance: '위젯 외관 커스터마이징', discImage: '스크래치 커스텀 이미지 업로드', delete: '삭제', background: '배경/스크래치 색상', accent: '버튼/스크래치 입력 전 색상', active: '버튼/스크래치 입력 시 색상', font: '폰트/스크래치 가로선 색상', save: '저장', cancel: '저장하지 않고 종료', invalidPort: '❗ 포트 번호는 1024 ~ 65535 사이여야 합니다.', saved: '저장 완료! OBS의 브라우저 소스 속성에서 "현재 페이지의 캐시를 새로고침" 버튼을 눌러주세요!' },
+    chatter: { title: '채터링 감지기', waiting: '데이터 수신 대기 중...', none: '아직 감지된 채터링 없음', count: '버튼 {button} : {count} 회' }, logs: { title: '로그 보기' }
+  },
+  en: {
+    menu: { main: 'Menu', language: 'Language', settings: 'Settings', logs: 'Logs', uploadCount: 'Upload play count', chatter: 'Chatter detector', about: 'About', contributors: 'Contributors', checkUpdates: 'Check for updates', restart: 'Restart', quit: 'Quit' },
+    common: { ok: 'OK', yes: 'Yes', no: 'No', later: 'Later', error: 'Error', notice: 'Notice' },
+    about: { message: 'IIDXwidget v{version}\nDeveloper: Sadang\nhttps://github.com/Coldlapse/IIDXwidget', contributors: 'Contributors: rhombus9, 멘탈바사삭' },
+    upload: { noToken: 'API token is not configured.', noData: 'There is no play count to upload.', confirmTitle: 'Confirm play-count upload', confirm: 'Upload the current count of {count} to the server?\nThe OBS count remains unchanged and the app count will reset to 0.', failed: 'Upload failed', invalidToken: 'The token is invalid.', success: 'Upload successful', successMessage: 'Complete. (Daily total: {count})', error: 'An error occurred: {message}' },
+    update: { availableTitle: 'Update available', available: 'Version {version} is available!\n\nChanges:\n{notes}', update: 'Update', skip: 'Skip this version', current: 'You are using the latest version.', errorTitle: 'Update error', error: 'An error occurred while checking for updates:\n{message}', readyTitle: 'Update ready', ready: 'The update has downloaded.\nRestart and install now?', restartNow: 'Restart now', later: 'Later' },
+    controller: { notFound: 'Could not find the {profile} device.', connecting: 'Connecting to {profile}', connected: '{profile} connected', openFailed: 'Failed to open the {profile} device', deviceError: 'Device error', closed: 'HID device closed safely', closeFailed: 'Failed to close HID device', dataError: 'Controller data error' },
+    settings: { title: 'Settings', app: 'Application settings', autoLaunch: 'Launch automatically with Windows', promo: 'Show widget promotion box', controllerProfile: 'Controller Profile', auto: 'Auto-detect', keyboard: 'Keyboard', apiToken: 'beatmania.app play-count token', apiPlaceholder: 'Enter the token issued by the website', lr2: 'Detect LR2 mode (dedicated controller only)', keyboardMapping: 'Keyboard mapping', genericMapping: 'AUTO generic controller mapping', genericHelp: 'Save Auto-detect, reopen Settings, click each field, and press the desired controller button. Press Save when finished.', logicalKey: 'IIDX key {key}', turntableClockwise: 'Turntable clockwise', turntableCounterclockwise: 'Turntable counterclockwise', listening: '{key}: listening for a button...', mapped: 'Mapped physical button {button} to {key}', serverPort: 'Server port', websocketPort: 'WebSocket port', infoPosition: 'Session information position', top: 'Top', bottom: 'Bottom', none: 'None', buttonLayout: 'Button layout', globalMA: 'Global release sample count (higher values react more slowly)', perButtonMA: 'Per-button release sample count (higher values react more slowly)', appearance: 'Widget appearance', discImage: 'Upload custom turntable image', delete: 'Delete', background: 'Background/turntable color', accent: 'Inactive button/turntable color', active: 'Active button/turntable color', font: 'Font/turntable line color', save: 'Save', cancel: 'Close without saving', invalidPort: '❗ Port numbers must be between 1024 and 65535.', saved: 'Saved! In OBS browser source properties, click “Refresh cache of current page”.' },
+    chatter: { title: 'Chatter detector', waiting: 'Waiting for data...', none: 'No chatter detected yet', count: 'Button {button}: {count}' }, logs: { title: 'Logs' }
+  }
+};
+Object.assign(translations.ko.settings, {
+  containerBackground: '위젯 컨테이너 배경색',
+  transparentContainer: '위젯 컨테이너 배경 투명하게',
+  background: '스크래치 배경색'
+});
+Object.assign(translations.en.settings, {
+  containerBackground: 'Widget container background',
+  transparentContainer: 'Transparent container background',
+  background: 'Turntable background'
+});
+translations.ko.readme = {
+  title: 'OBS 설정 안내',
+  obsSetup: 'OBS 설정 방법',
+  obsInstructions: '1. IIDXwidget을 실행한 상태로 유지하세요.\n2. OBS에서 소스 → + → 브라우저를 선택하세요.\n3. URL에 http://127.0.0.1:{serverPort}/widget 을 입력하세요.\n4. 너비 1000, 높이 800을 권장합니다.\n5. 확인을 누르세요.\n6. 화면이 갱신되지 않으면 브라우저 소스 속성에서 “현재 페이지의 캐시를 새로고침”을 누르세요.\n\nWebSocket은 ws://127.0.0.1:{webSocketPort} 에 자동으로 연결되므로 OBS에서 별도로 설정할 필요가 없습니다.'
+};
+translations.en.readme = {
+  title: 'OBS Setup Guide',
+  obsSetup: 'How to set up OBS',
+  obsInstructions: '1. Keep IIDXwidget running.\n2. In OBS, select Sources → + → Browser.\n3. Enter http://127.0.0.1:{serverPort}/widget as the URL.\n4. A width of 1000 and height of 800 is recommended.\n5. Click OK.\n6. If the display does not update, open the Browser Source properties and click “Refresh cache of current page.”\n\nThe widget connects automatically to ws://127.0.0.1:{webSocketPort}; no separate WebSocket configuration is needed in OBS.'
+};
+function normalizeLanguage(language) { return language === 'en' ? 'en' : 'ko'; }
+function getNested(object, key) { return key.split('.').reduce((value, part) => value && value[part], object); }
+function translate(language, key, replacements = {}) { const value = getNested(translations[normalizeLanguage(language)], key) ?? getNested(translations.ko, key) ?? key; return String(value).replace(/\{(\w+)\}/g, (_, name) => replacements[name] ?? `{${name}}`); }
+module.exports = { translations, normalizeLanguage, translate };
diff --git a/iidxwidget-app/main.js b/iidxwidget-app/main.js
index 6422924..b9b16df 100644
--- a/iidxwidget-app/main.js
+++ b/iidxwidget-app/main.js
@@ -8,8 +8,9 @@ const SETTINGS_FILE = path.join(app.getPath('userData'), 'settings.json');
 
 const { startServer, stopServer } = require('./server');
 const { startWebSocketServer, stopWebSocketServer, broadcastControllerData } = require('./wsServer');
-const { startControllerReader } = require('./controller/controllerReader');
+const { startControllerReader, startAutoControllerReader } = require('./controller/controllerReader');
 const { startGlobalKeyboardReader } = require('./controller/keyboardReader');
+const { normalizeLanguage, translate } = require('./localization/translations');
 
 
 let mainWindow;
@@ -20,10 +21,11 @@ let webSocketInstance;
 let chatterWindow = null;
 
 const defaultSettings = {
+  language: 'ko',
   apiToken: "",
   serverPort: 8080,
   webSocketPort: 5678,
-  controllerProfile: 'PHOENIXWAN',
+  controllerProfile: 'AUTO',
   lr2ModeEnabled: false,
   autoLaunch: false,
   keyMapping: {
@@ -37,16 +39,19 @@ const defaultSettings = {
       "5": "KeyJ",
       "6": "KeyK",
       "7": "KeyL"
-    }
+    },
+    GENERIC: { "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, SCup: 8, SCdown: 9 }
   },
   widget: {
     infoPosition: "bottom",
     buttonLayout: "1P",
     discImagePath: null,
     showPromoBox: false,
+    transparentContainer: false,
     GlobalReleaseMALength: 200,
     PerButtonMALength: 200,
     colors: {
+      containerBackground: "#000000",
       background: "#000000",
       accent: "#444444",
       fontColor: "#cccccc",
@@ -140,9 +145,10 @@ function createLogsWindow() {
 
 // ✅ 타건 기록 전송 함수
 async function sendTypingCount() {
+  const t = (key, replacements) => translate(settings.language, key, replacements);
   const token = settings.apiToken;
   if (!token) {
-    dialog.showMessageBox({ type: 'error', title: '오류', message: 'API 토큰이 설정되지 않았습니다.' });
+    dialog.showMessageBox({ type: 'error', title: t('common.error'), message: t('upload.noToken') });
     return;
   }
 
@@ -154,17 +160,16 @@ async function sendTypingCount() {
   // 2. 위젯으로부터 카운트를 한 번만 받도록 리스너 설정
   ipcMain.once('session-count', async (event, count) => {
     if (count === 0) {
-      dialog.showMessageBox({ type: 'info', title: '알림', message: '전송할 타건 기록이 없습니다.' });
+      dialog.showMessageBox({ type: 'info', title: t('common.notice'), message: t('upload.noData') });
       return;
     }
 
     // 3. 사용자에게 전송 여부 확인
     const result = dialog.showMessageBoxSync(mainWindow, {
       type: 'question',
-      buttons: ['예', '아니오'],
+      buttons: [t('common.yes'), t('common.no')],
       defaultId: 0, cancelId: 1,
-      title: '타건 기록 전송 확인',
-      message: `현재 타건 수 ${count}회를 서버로 전송합니다.\nOBS의 수치는 그대로 남고, 앱 화면의 타건 수치는 0으로 초기화됩니다. 계속하시겠습니까?`
+      title: t('upload.confirmTitle'), message: t('upload.confirm', { count })
     });
 
     if (result === 1) return; // '아니오' 선택
@@ -182,14 +187,14 @@ async function sendTypingCount() {
       });
 
       if (response.status === 401) {
-        dialog.showMessageBox({ type: 'error', title: '전송 실패', message: '잘못된 토큰입니다.' });
+        dialog.showMessageBox({ type: 'error', title: t('upload.failed'), message: t('upload.invalidToken') });
         return;
       }
       if (!response.ok) throw new Error(`서버 응답 오류: ${response.statusText}`);
 
       const data = await response.json();
       if (data.status === 'success') {
-        dialog.showMessageBox({ type: 'info', title: '전송 성공', message: `완료되었습니다. (일일 총 타건 수: ${data.daily_total})` });
+        dialog.showMessageBox({ type: 'info', title: t('upload.success'), message: t('upload.successMessage', { count: data.daily_total }) });
         // 5. 성공 시 앱의 위젯(mainWindow)에만 초기화 명령 전송
         if (mainWindow) {
           mainWindow.webContents.send('reset-session-count');
@@ -199,52 +204,78 @@ async function sendTypingCount() {
       }
     } catch (error) {
       console.error('❌ API 전송 오류:', error);
-      dialog.showMessageBox({ type: 'error', title: '전송 실패', message: `오류가 발생했습니다: ${error.message}` });
+      dialog.showMessageBox({ type: 'error', title: t('upload.failed'), message: t('upload.error', { message: error.message }) });
     }
   });
 }
 
 function createStatusMenu() {
+  const language = normalizeLanguage(settings.language);
+  const t = (key, replacements) => translate(language, key, replacements);
   const menu = Menu.buildFromTemplate([
     {
-      label: '메뉴',
+      label: t('menu.main'),
       submenu: [
-        { label: '설정', click: createSettingsWindow },
-        { label: '로그', click: createLogsWindow },
+        { label: t('menu.settings'), click: createSettingsWindow },
+        { label: t('menu.logs'), click: createLogsWindow },
         { type: 'separator' },
-        { label: '타건 기록 서버로 전송', click: sendTypingCount},
-        { label: '채터링 감지', click: createChatterWindow },
+        { label: t('menu.uploadCount'), click: sendTypingCount},
+        { label: t('menu.chatter'), click: createChatterWindow },
         { type: 'separator' },
-        { label: '정보', click: () => {
+        { label: t('menu.about'), click: () => {
             const { dialog } = require('electron');
             dialog.showMessageBox({
               type: 'info',
-              title: '정보',
-              message: `IIDXwidget v${appVersion}\n개발자: Sadang\nhttps://github.com/Coldlapse/IIDXwidget`,
-              buttons: ['확인']
+              title: t('menu.about'), message: t('about.message', { version: appVersion }), buttons: [t('common.ok')]
             });
           }
         },
-        { label: '기여자', click: () => {
+        { label: t('menu.contributors'), click: () => {
           const { dialog } = require('electron');
           dialog.showMessageBox({
             type: 'info',
-            title: '기여자',
-            message: '기여자 : rhombus9, 멘탈바사삭',
-            buttons: ['확인']
+            title: t('menu.contributors'), message: t('about.contributors'), buttons: [t('common.ok')]
           });
         }
       },
         { type: 'separator' },
-        { label: '업데이트 확인', click: () => manualUpdateCheck() },
-        { label: '재시작', click: restartApp },
-        { label: '끝내기', click: () => app.quit() }
+        { label: t('menu.checkUpdates'), click: () => manualUpdateCheck() },
+        { label: t('menu.restart'), click: restartApp },
+        { label: t('menu.quit'), click: () => app.quit() }
+      ]
+    },
+    {
+      label: t('menu.language'), submenu: [
+        { label: '한국어', type: 'radio', checked: language === 'ko', click: () => setLanguage('ko') },
+        { label: 'English', type: 'radio', checked: language === 'en', click: () => setLanguage('en') }
       ]
+    },
+    {
+      label: 'README',
+      submenu: [{
+        label: t('readme.obsSetup'),
+        click: () => dialog.showMessageBox({
+          type: 'info',
+          title: t('readme.title'),
+          message: t('readme.obsInstructions', {
+            serverPort: settings.serverPort || 8080,
+            webSocketPort: settings.webSocketPort || 5678
+          }),
+          buttons: [t('common.ok')]
+        })
+      }]
     }
   ]);
   Menu.setApplicationMenu(menu);
 }
 
+function setLanguage(language) {
+  settings.language = normalizeLanguage(language);
+  fs.writeFileSync(SETTINGS_FILE, JSON.stringify(settings, null, 2));
+  createStatusMenu();
+  BrowserWindow.getAllWindows().forEach(win => { if (!win.isDestroyed()) win.webContents.send('language-changed', settings.language); });
+}
+
 function restartApp() {
   console.log('🔄 Restarting app...');
   stopServer();
@@ -264,31 +295,7 @@ function restartApp() {
     serverInstance = startServer(settings.serverPort, userImageDir);
     webSocketInstance = startWebSocketServer(settings.webSocketPort);
 
-    if (settings.controllerProfile === 'PHOENIXWAN' || settings.controllerProfile === 'FPS EMP Gen2') {
-      const { startControllerReader } = require('./controller/controllerReader');
-      controllerInstance = startControllerReader(settings.controllerProfile, data => {
-        if (mainWindow) mainWindow.webContents.send('controller-data', data);
-        broadcastControllerData(data);
-      }, { lr2ModeEnabled: settings.lr2ModeEnabled });
-
-      currentHIDDevice = controllerInstance;  // ✅ 이거 추가!
-    } else if (settings.controllerProfile === 'KB') {
-      const defaultMap = {
-        SCup: "ShiftLeft",
-        SCdown: "ControlLeft",
-        "1": "KeyS",
-        "2": "KeyD",
-        "3": "KeyF",
-        "4": "Space",
-        "5": "KeyJ",
-        "6": "KeyK",
-        "7": "KeyL"
-      };
-      const map = Object.assign({}, defaultMap, settings.keyMapping?.KB || {});
-      keyboardInstance = startGlobalKeyboardReader(map, data => {
-        if (mainWindow) mainWindow.webContents.send('controller-data', [data]);
-      });
-    }
+    startConfiguredController();
 
     if (mainWindow) mainWindow.reload();
   }, 300);
@@ -306,6 +313,7 @@ console.log = (...args) => {
 
 // 📡 IPC
 ipcMain.handle('get-websocket-port', () => settings.webSocketPort || 5678);
+ipcMain.handle('get-language', () => normalizeLanguage(settings.language));
 ipcMain.handle('request-log-buffer', () => logBuffer);
 ipcMain.handle('get-app-version', () => {
   return app.getVersion();
@@ -323,15 +331,10 @@ ipcMain.handle('load-settings', () => {
 
 ipcMain.handle('save-settings', async (event, newSettings) => {
   try {
+    newSettings.language = normalizeLanguage(newSettings.language ?? settings.language);
     fs.writeFileSync(SETTINGS_FILE, JSON.stringify(newSettings, null, 2));
     settings = newSettings;
 
-    if (settings.controllerProfile === 'KB') {
-      startKBMode();
-    } else {
-      startPHOENIXWANMode(settings.controllerProfile, settings.lr2ModeEnabled); // ✅ 수정
-    }
-
     app.setLoginItemSettings({
       openAtLogin: newSettings.autoLaunch,
       path: app.getPath('exe')
@@ -423,10 +426,42 @@ function startPHOENIXWANMode(profile = 'PHOENIXWAN', lr2DetectEnabled = false) {
 }
 
   console.log(`🎮 Starting controller reader for profile: ${profile}`);
-  currentHIDDevice = startControllerReader(profile, (data) => {
-    if (mainWindow) mainWindow.webContents.send('controller-data', data);
-    broadcastControllerData(data);
-  }, { lr2ModeEnabled: lr2DetectEnabled });
+  currentHIDDevice = startControllerReader(profile, dispatchControllerData, { lr2ModeEnabled: lr2DetectEnabled, logger: controllerLogger });
+}
+
+function startAutoControllerMode() {
+  stopInputReaders();
+  currentHIDDevice = startAutoControllerReader(dispatchControllerData, {
+    genericMapping: settings.keyMapping?.GENERIC || {}, lr2ModeEnabled: settings.lr2ModeEnabled, logger: controllerLogger
+  });
+}
+
+function stopInputReaders() {
+  if (currentHIDDevice?.close) { try { currentHIDDevice.close(); } catch (e) {} currentHIDDevice = null; }
+  if (currentKBReader?.stop) { try { currentKBReader.stop(); } catch (e) {} currentKBReader = null; }
+}
+
+function dispatchControllerData(data) {
+  const widgetData = data.filter(event => event.type !== 'physical-button');
+  if (settingsWindow && !settingsWindow.isDestroyed()) settingsWindow.webContents.send('controller-data', data);
+  if (mainWindow && !mainWindow.isDestroyed() && widgetData.length) mainWindow.webContents.send('controller-data', widgetData);
+  if (chatterWindow && !chatterWindow.isDestroyed() && widgetData.length) chatterWindow.webContents.send('controller-data', widgetData);
+  if (widgetData.length) broadcastControllerData(widgetData);
+}
+
+function controllerLogger(level, code, details = {}) {
+  const message = translate(settings.language, `controller.${code}`, details);
+  console[level]?.(`${level === 'error' ? '❌' : '🎮'} ${message}`, details.error || '');
+}
+
+function startConfiguredController() {
+  switch (settings.controllerProfile) {
+    case 'KB': startKBMode(); break;
+    case 'AUTO': startAutoControllerMode(); break;
+    case 'PHOENIXWAN':
+    case 'FPS EMP Gen2': startPHOENIXWANMode(settings.controllerProfile, settings.lr2ModeEnabled); break;
+    default: startAutoControllerMode(); break;
+  }
 }
 
 function startKBMode() {
@@ -462,6 +497,7 @@ function startKBMode() {
 }
 
 function manualUpdateCheck() {
+  const t = (key, replacements) => translate(settings.language, key, replacements);
   autoUpdater.autoDownload = false;
 
   autoUpdater.once('checking-for-update', () => {
@@ -475,13 +511,13 @@ function manualUpdateCheck() {
       .replace(/<[^>]+>/g, '')  // HTML 태그 제거
       .trim();
 
-    const message = `새 버전 ${info.version} 이(가) 있습니다!\n\n변경사항:\n${plainReleaseNotes}`;
+    const message = t('update.available', { version: info.version, notes: plainReleaseNotes });
 
     const result = dialog.showMessageBoxSync({
       type: 'info',
-      title: '업데이트 알림',
+      title: t('update.availableTitle'),
       message: message,
-      buttons: ['업데이트', '다음에 하기'],
+      buttons: [t('update.update'), t('common.later')],
       cancelId: 1,
       defaultId: 0,
     });
@@ -495,8 +531,7 @@ function manualUpdateCheck() {
     console.log('✅ 현재 최신 버전입니다.');
     dialog.showMessageBox({
       type: 'info',
-      title: '업데이트 확인',
-      message: '현재 최신 버전입니다.'
+      title: t('menu.checkUpdates'), message: t('update.current')
     });
   });
 
@@ -504,8 +539,7 @@ function manualUpdateCheck() {
     console.error('❌ 업데이트 오류:', err);
     dialog.showMessageBox({
       type: 'error',
-      title: '업데이트 오류',
-      message: `업데이트 확인 중 오류 발생:\n${err.message}`
+      title: t('update.errorTitle'), message: t('update.error', { message: err.message })
     });
   });
 
@@ -549,6 +583,7 @@ ipcMain.handle('request-chatter-summary', () => {
 
 
 function checkForUpdateWithUI() {
+  const t = (key, replacements) => translate(settings.language, key, replacements);
   autoUpdater.autoDownload = false;
 
   autoUpdater.on('update-available', (info) => {
@@ -564,13 +599,13 @@ function checkForUpdateWithUI() {
       .replace(/<[^>]+>/g, '')  // HTML 태그 제거
       .trim();
 
-    const message = `새 버전 ${info.version} 이(가) 있습니다!\n\n변경사항:\n${plainReleaseNotes}`;
+    const message = t('update.available', { version: info.version, notes: plainReleaseNotes });
 
     const result = dialog.showMessageBoxSync({
       type: 'info',
-      title: '업데이트 알림',
+      title: t('update.availableTitle'),
       message: message,
-      buttons: ['업데이트', '다음에 하기', '이번 버전 스킵'],
+      buttons: [t('update.update'), t('common.later'), t('update.skip')],
       cancelId: 1,
       defaultId: 0,
     });
@@ -586,9 +621,7 @@ function checkForUpdateWithUI() {
   autoUpdater.on('update-downloaded', () => {
     const confirm = dialog.showMessageBoxSync({
       type: 'question',
-      title: '업데이트 준비 완료',
-      message: '업데이트가 다운로드되었습니다.\n지금 재시작하고 설치할까요?',
-      buttons: ['지금 재시작', '나중에'],
+      title: t('update.readyTitle'), message: t('update.ready'), buttons: [t('update.restartNow'), t('update.later')],
       defaultId: 0,
       cancelId: 1
     });
@@ -643,11 +676,7 @@ app.whenReady().then(() => {
   serverInstance = startServer(settings.serverPort, userImageDir);
   webSocketInstance = startWebSocketServer(settings.webSocketPort);
 
-  if (settings.controllerProfile === 'KB') {
-    startKBMode();
-  } else {
-    startPHOENIXWANMode(settings.controllerProfile, settings.lr2ModeEnabled);
-  }
+  startConfiguredController();
 
   createMainWindow();
   createStatusMenu();
diff --git a/iidxwidget-app/package.json b/iidxwidget-app/package.json
index c20ed40..2436293 100644
--- a/iidxwidget-app/package.json
+++ b/iidxwidget-app/package.json
@@ -7,14 +7,19 @@
     "main": "main.js",
     "scripts": {
         "start": "electron .",
-        "build": "electron-builder"
+        "build": "electron-builder",
+        "test": "node test/controllerReader.test.js && node test/localization.test.js"
     },
     "build": {
         "appId": "app.beatmania.iidxwidget",
         "productName": "IIDXwidget",
         "artifactName": "IIDXwidget-Setup-${version}.${ext}",
         "files": [
-            "**/*"
+            "**/*",
+            "!dist{,/**}",
+            "!dist-*/**",
+            "!dist-rebuild{,/**}",
+            "!dist-fixed{,/**}"
         ],
         "directories": {
             "buildResources": "build"
diff --git a/iidxwidget-app/preload.js b/iidxwidget-app/preload.js
index 0a7738e..75ff28c 100644
--- a/iidxwidget-app/preload.js
+++ b/iidxwidget-app/preload.js
@@ -6,6 +6,12 @@ contextBridge.exposeInMainWorld('electronAPI', {
   startKeyboardReader: () => ipcRenderer.send('start-keyboard-reader'),
   getWebSocketPort: () => ipcRenderer.invoke('get-websocket-port'),
   onControllerData: (callback) => ipcRenderer.on('controller-data', (event, data) => callback(data)),
+  getLanguage: () => ipcRenderer.invoke('get-language'),
+  onLanguageChanged: callback => {
+    const listener = (_, language) => callback(language);
+    ipcRenderer.on('language-changed', listener);
+    return () => ipcRenderer.removeListener('language-changed', listener);
+  },
   onNewLog: (callback) => ipcRenderer.on('new-log', (event, message) => callback(message)),
   requestLogBuffer: () => ipcRenderer.invoke('request-log-buffer'),
   loadSettings: () => ipcRenderer.invoke('load-settings'),
@@ -24,4 +30,4 @@ contextBridge.exposeInMainWorld('electronAPI', {
 
 contextBridge.exposeInMainWorld('iidxapi', {
   getAppVersion: () => ipcRenderer.invoke('get-app-version')
-});
\ No newline at end of file
+});
diff --git a/iidxwidget-app/renderer/chatter/chatter.html b/iidxwidget-app/renderer/chatter/chatter.html
index f265684..e96971c 100644
--- a/iidxwidget-app/renderer/chatter/chatter.html
+++ b/iidxwidget-app/renderer/chatter/chatter.html
@@ -2,7 +2,7 @@
 <html lang="ko">
 <head>
   <meta charset="UTF-8" />
-  <title>채터링 감지기</title>
+  <title data-i18n="chatter.title">채터링 감지기</title>
   <link href="https://fonts.googleapis.com/earlyaccess/nanumgothic.css" rel="stylesheet" />
   <style>
     body {
@@ -16,8 +16,8 @@
   </style>
 </head>
 <body>
-  <h2>채터링 감지기</h2>
-  <div id="log">데이터 수신 대기 중...</div>
-  <script src="chatter.js"></script>
+  <h2 data-i18n="chatter.title">채터링 감지기</h2>
+  <div id="log" data-i18n="chatter.waiting">데이터 수신 대기 중...</div>
+  <script src="../shared/i18n.js"></script><script src="chatter.js"></script>
 </body>
 </html>
diff --git a/iidxwidget-app/renderer/chatter/chatter.js b/iidxwidget-app/renderer/chatter/chatter.js
index 54f8ef4..9098f63 100644
--- a/iidxwidget-app/renderer/chatter/chatter.js
+++ b/iidxwidget-app/renderer/chatter/chatter.js
@@ -5,9 +5,9 @@ const chatterCounts = {};
 function updateUI() {
   let output = '';
   Object.keys(chatterCounts).forEach(btn => {
-    output += `버튼 ${btn} : ${chatterCounts[btn]} 회\n`;
+    output += `${window.i18n.t('chatter.count', { button: btn, count: chatterCounts[btn] })}\n`;
   });
-  logEl.textContent = output || '아직 감지된 채터링 없음';
+  logEl.textContent = output || window.i18n.t('chatter.none');
 }
 
 // 요약 데이터 갱신 함수
@@ -26,3 +26,4 @@ fetchSummary();
 
 // 이후 1초마다 갱신
 setInterval(fetchSummary, 1000);
+document.addEventListener('i18n-changed', updateUI);
diff --git a/iidxwidget-app/renderer/logs/logs.html b/iidxwidget-app/renderer/logs/logs.html
index 778d3cf..74f7ff4 100644
--- a/iidxwidget-app/renderer/logs/logs.html
+++ b/iidxwidget-app/renderer/logs/logs.html
@@ -2,7 +2,7 @@
 <html lang="ko">
 <head>
   <meta charset="UTF-8">
-  <title>로그 보기</title>
+  <title data-i18n="logs.title">로그 보기</title>
   <style>
     body {
       background: #000;
@@ -21,6 +21,6 @@
 <body>
   <div id="log-container"></div>
 
-  <script src="logs.js"></script>
+  <script src="../shared/i18n.js"></script><script src="logs.js"></script>
 </body>
 </html>
diff --git a/iidxwidget-app/renderer/settings/settings.html b/iidxwidget-app/renderer/settings/settings.html
index 6169b9b..1775e56 100644
--- a/iidxwidget-app/renderer/settings/settings.html
+++ b/iidxwidget-app/renderer/settings/settings.html
@@ -2,7 +2,7 @@
 <html lang="ko">
 <head>
   <meta charset="UTF-8" />
-  <title>설정</title>
+  <title data-i18n="settings.title">설정</title>
   <link href="https://fonts.googleapis.com/earlyaccess/nanumgothic.css" rel="stylesheet" />
   <link rel="stylesheet" href="style.css" />
 </head>
@@ -10,34 +10,35 @@
   
   <div class="settings-container">
     <div class="setting-group">
-      <label class="section-label">앱 기본 설정</label>
-      <label><input type="checkbox" id="autoLaunch" /> Windows 시작 시 자동 실행</label>
+      <label class="section-label" data-i18n="settings.app">앱 기본 설정</label>
+      <label><input type="checkbox" id="autoLaunch" /> <span data-i18n="settings.autoLaunch">Windows 시작 시 자동 실행</span></label>
       <label>
         <input type="checkbox" id="showPromoBox" />
-        위젯 홍보 박스 표시
+        <span data-i18n="settings.promo">위젯 홍보 박스 표시</span>
       </label><br>
-      <label for="controllerProfile">컨트롤러 프로필</label>
+      <label for="controllerProfile" data-i18n="settings.controllerProfile">컨트롤러 프로필</label>
       <select id="controllerProfile">
+        <option value="AUTO" data-i18n="settings.auto">자동 감지</option>
         <option value="PHOENIXWAN">PHOENIXWAN+</option>
         <option value="FPS EMP Gen2">FPS EMP Gen2</option>
-        <option value="KB">BM으로 하라고 만든 게임을 꾸역꾸역 키보드로 하는 멍청이</option>
+        <option value="KB" data-i18n="settings.keyboard">키보드</option>
       </select>
     </div>
 
     <div class="setting-group">
-      <label for="apiToken">beatmania.app 타건 기록 토큰</label>
-      <input type="text" id="apiToken" placeholder="웹사이트에서 발급받은 토큰 입력" />
+      <label for="apiToken" data-i18n="settings.apiToken">beatmania.app 타건 기록 토큰</label>
+      <input type="text" id="apiToken" placeholder="웹사이트에서 발급받은 토큰 입력" data-i18n-placeholder="settings.apiPlaceholder" />
     </div>
 
     <div id="lr2-detect-row">
       <label>
         <input type="checkbox" id="lr2ModeEnabled" />
-        LR2 모드 감지 (주작콘 전용)
+        <span data-i18n="settings.lr2">LR2 모드 감지 (주작콘 전용)</span>
       </label>
     </div>
 
     <div id="key-mapping-container" class="setting-group" style="display: none;">
-      <label>키보드 매핑 (저는 KB를 하는 바보입니다)</label>
+      <label data-i18n="settings.keyboardMapping">키보드 매핑</label>
       <table id="key-mapping-table">
         <tr><td>SCup</td><td><input type="text" data-key="SCup" readonly /></td></tr>
         <tr><td>SCdown</td><td><input type="text" data-key="SCdown" readonly /></td></tr>
@@ -51,77 +52,101 @@
       </table>
     </div>
 
+    <div id="generic-mapping-container" class="setting-group" style="display: none;">
+      <label data-i18n="settings.genericMapping">AUTO 일반 컨트롤러 매핑</label>
+      <p class="mapping-help" data-i18n="settings.genericHelp">Auto-detect를 저장한 뒤 설정을 다시 열고, 각 필드를 클릭한 다음 원하는 컨트롤러 버튼을 누르세요. 마지막에 저장을 누르세요.</p>
+      <table id="generic-mapping-table">
+        <tbody>
+          <tr><td data-i18n="settings.logicalKey">IIDX 키 1</td><td><input type="number" min="1" max="32" data-key="1"></td></tr>
+          <tr><td>IIDX 키 2</td><td><input type="number" min="1" max="32" data-key="2"></td></tr>
+          <tr><td>IIDX 키 3</td><td><input type="number" min="1" max="32" data-key="3"></td></tr>
+          <tr><td>IIDX 키 4</td><td><input type="number" min="1" max="32" data-key="4"></td></tr>
+          <tr><td>IIDX 키 5</td><td><input type="number" min="1" max="32" data-key="5"></td></tr>
+          <tr><td>IIDX 키 6</td><td><input type="number" min="1" max="32" data-key="6"></td></tr>
+          <tr><td>IIDX 키 7</td><td><input type="number" min="1" max="32" data-key="7"></td></tr>
+          <tr><td>턴테이블 시계 방향</td><td><input type="number" min="1" max="32" data-key="SCup"></td></tr>
+          <tr><td>턴테이블 반시계 방향</td><td><input type="number" min="1" max="32" data-key="SCdown"></td></tr>
+        </tbody>
+      </table>
+      <div id="mapping-status" aria-live="polite"></div>
+    </div>
+
     <div class="setting-group">
-      <label for="serverPort">서버 포트</label>
+      <label for="serverPort" data-i18n="settings.serverPort">서버 포트</label>
       <input type="number" id="serverPort" min="1024" max="65535" />
     </div>
     <div class="setting-group">
-      <label for="webSocketPort">웹소켓 포트</label>
+      <label for="webSocketPort" data-i18n="settings.websocketPort">웹소켓 포트</label>
       <input type="number" id="webSocketPort" min="1024" max="65535" />
     </div>
 
     <div class="setting-group">
-      <label for="infoPosition">세션 정보 표시 위치</label>
+      <label for="infoPosition" data-i18n="settings.infoPosition">세션 정보 표시 위치</label>
       <select id="infoPosition">
-        <option value="top">상단</option>
-        <option value="bottom">하단</option>
-        <option value="none">없음</option>
+        <option value="top" data-i18n="settings.top">상단</option><option value="bottom" data-i18n="settings.bottom">하단</option><option value="none" data-i18n="settings.none">없음</option>
       </select>
     </div>
     <div class="setting-group">
-      <label for="buttonLayout">버튼 레이아웃</label>
+      <label for="buttonLayout" data-i18n="settings.buttonLayout">버튼 레이아웃</label>
       <select id="buttonLayout">
         <option value="1P">1P</option>
         <option value="2P">2P</option>
       </select>
     </div>
     <div class="setting-group">
-      <label for="GlobalReleaseMALength">전체 Release 수집 표본 갯수 (수치가 높을수록 변화에 둔감)</label>
+      <label for="GlobalReleaseMALength" data-i18n="settings.globalMA">전체 Release 수집 표본 갯수 (수치가 높을수록 변화에 둔감)</label>
       <input type="number" id="GlobalReleaseMALength" min="10" max="1000" step="1" value="200" />
     </div>
 
     <div class="setting-group">
-      <label for="PerButtonMALength">버튼별 Release 수집 표본 갯수 (수치가 높을수록 변화에 둔감)</label>
+      <label for="PerButtonMALength" data-i18n="settings.perButtonMA">버튼별 Release 수집 표본 갯수 (수치가 높을수록 변화에 둔감)</label>
       <input type="number" id="PerButtonMALength" min="10" max="1000" step="1" value="200" />
     </div>
-    <label class="section-label">위젯 외관 커스터마이징</label>
+    <label class="section-label" data-i18n="settings.appearance">위젯 외관 커스터마이징</label>
     <div class="setting-group">
-      <label>스크래치 커스텀 이미지 업로드</label>
+      <label><input type="checkbox" id="transparent-container" /> <span data-i18n="settings.transparentContainer">위젯 컨테이너 배경 투명하게</span></label>
+    </div>
+    <div class="setting-group">
+      <label data-i18n="settings.discImage">스크래치 커스텀 이미지 업로드</label>
       <div class="input-with-delete">
         <input type="file" id="disc-image-upload" accept="image/*">
-        <button id="delete-disc-button">삭제</button>
+        <button id="delete-disc-button" data-i18n="settings.delete">삭제</button>
       </div>
       <img id="disc-preview" style="margin-top: 10px; max-width: 100%; border-radius: 10px;" />
     </div>
     <div class="setting-group">
       <div class="color-setting-row">
-        <label for="color-background">배경/스크래치 색상</label>
+        <label for="color-container-background" data-i18n="settings.containerBackground">위젯 컨테이너 배경색</label>
+        <input type="color" id="color-container-background" />
+        <span class="color-preview" id="preview-container-background"></span>
+      </div>
+      <div class="color-setting-row">
+        <label for="color-background" data-i18n="settings.background">스크래치 배경색</label>
         <input type="color" id="color-background" />
         <span class="color-preview" id="preview-background"></span>
       </div>
       <div class="color-setting-row">
-        <label for="color-accent">버튼/스크래치 입력 전 색상</label>
+        <label for="color-accent" data-i18n="settings.accent">버튼/스크래치 입력 전 색상</label>
         <input type="color" id="color-accent" />
         <span class="color-preview" id="preview-accent"></span>
       </div>
       <div class="color-setting-row">
-        <label for="color-activeColor">버튼/스크래치 입력 시 색상</label>
+        <label for="color-activeColor" data-i18n="settings.active">버튼/스크래치 입력 시 색상</label>
         <input type="color" id="color-activeColor" />
         <span class="color-preview" id="preview-activeColor"></span>
       </div>
       <div class="color-setting-row">
-        <label for="color-fontColor">폰트/스크래치 가로선 색상</label>
+        <label for="color-fontColor" data-i18n="settings.font">폰트/스크래치 가로선 색상</label>
         <input type="color" id="color-fontColor" />
         <span class="color-preview" id="preview-fontColor"></span>
       </div>
     </div>
 
     <div class="button-row">
-      <button id="save-button">저장</button>
-      <button id="cancel-button">저장하지 않고 종료</button>
+      <button id="save-button" data-i18n="settings.save">저장</button><button id="cancel-button" data-i18n="settings.cancel">저장하지 않고 종료</button>
     </div>
   </div>
 
-  <script src="settings.js"></script>
+  <script src="../shared/i18n.js"></script><script src="settings.js"></script>
 </body>
 </html>
diff --git a/iidxwidget-app/renderer/settings/settings.js b/iidxwidget-app/renderer/settings/settings.js
index 24cb4a9..8a050e6 100644
--- a/iidxwidget-app/renderer/settings/settings.js
+++ b/iidxwidget-app/renderer/settings/settings.js
@@ -14,9 +14,11 @@ document.getElementById('save-button').addEventListener('click', async () => {
   const buttonLayout = document.getElementById('buttonLayout').value;
   const lr2ModeEnabled = document.getElementById('lr2ModeEnabled').checked;
   const showPromoBox = document.getElementById('showPromoBox').checked;
+  const transparentContainer = document.getElementById('transparent-container').checked;
   const globalMALength = parseInt(document.getElementById('GlobalReleaseMALength').value, 10);
   const perButtonMALength = parseInt(document.getElementById('PerButtonMALength').value, 10);
   const widgetColors = {
+    containerBackground: document.getElementById('color-container-background').value,
     background: document.getElementById('color-background').value,
     accent: document.getElementById('color-accent').value,
     fontColor: document.getElementById('color-fontColor').value,
@@ -28,12 +30,13 @@ document.getElementById('save-button').addEventListener('click', async () => {
     serverPort < 1024 || serverPort > 65535 ||
     webSocketPort < 1024 || webSocketPort > 65535
   ) {
-    alert('❗ 포트 번호는 1024 ~ 65535 사이여야 합니다.');
+    alert(window.i18n.t('settings.invalidPort'));
     return;
   }
 
   const settings = await window.electronAPI.loadSettings();
   const existingKeyMapping = settings?.keyMapping?.KB || {};
+  const existingGenericMapping = settings?.keyMapping?.GENERIC || {};
 
   // ✅ 키 매핑 저장
   let kbMapping = {};
@@ -44,6 +47,10 @@ document.getElementById('save-button').addEventListener('click', async () => {
       if (value) kbMapping[action] = value;
     });
   }
+  const genericMapping = { ...existingGenericMapping };
+  if (controllerProfile === 'AUTO') document.querySelectorAll('#generic-mapping-table input').forEach(input => {
+    const value = Number(input.value); if (value >= 1 && value <= 32) genericMapping[input.dataset.key] = value;
+  });
 
   const newSettings = {
     apiToken,
@@ -53,13 +60,15 @@ document.getElementById('save-button').addEventListener('click', async () => {
     lr2ModeEnabled,
     autoLaunch: document.getElementById('autoLaunch').checked,
     keyMapping: {
-      KB: controllerProfile === 'KB' ? kbMapping : existingKeyMapping
+      KB: controllerProfile === 'KB' ? kbMapping : existingKeyMapping,
+      GENERIC: genericMapping
     },
     widget: {
       infoPosition,
       buttonLayout,
       discImagePath: uploadedDiscImagePath,
       showPromoBox,
+      transparentContainer,
       globalMALength,
       perButtonMALength,
       colors: widgetColors
@@ -67,20 +76,23 @@ document.getElementById('save-button').addEventListener('click', async () => {
   };
 
   await window.electronAPI.saveSettings(newSettings);
-  alert('저장 완료! OBS의 브라우저 소스 속성에서 "현재 페이지의 캐시를 새로고침" 버튼을 눌러주세요!');
+  alert(window.i18n.t('settings.saved'));
   window.close();
 });
 
 // ✅ 키 매핑 UI 토글 함수
 function toggleKeyMappingUI(profile) {
   const keyMapping = document.getElementById('key-mapping-container');
+  const genericMapping = document.getElementById('generic-mapping-container');
   const lr2Row = document.getElementById('lr2-detect-row');
   if (profile === 'KB') {
     keyMapping.style.display = 'block';
+    genericMapping.style.display = 'none';
     lr2Row.style.display = 'none';
   } else {
     keyMapping.style.display = 'none';
-    lr2Row.style.display = 'block';
+    genericMapping.style.display = profile === 'AUTO' ? 'block' : 'none';
+    lr2Row.style.display = profile === 'AUTO' ? 'none' : 'block';
   }
 }
 
@@ -92,16 +104,18 @@ function toggleKeyMappingUI(profile) {
     document.getElementById('apiToken').value = settings.apiToken || '';
     document.getElementById('serverPort').value = settings.serverPort || 8080;
     document.getElementById('webSocketPort').value = settings.webSocketPort || 5678;
-    document.getElementById('controllerProfile').value = settings.controllerProfile || 'PHOENIXWAN';
+    document.getElementById('controllerProfile').value = settings.controllerProfile || 'AUTO';
     document.getElementById('infoPosition').value = settings.widget?.infoPosition || 'bottom';
     document.getElementById('buttonLayout').value = settings.widget?.buttonLayout || '1P';
     document.getElementById('lr2ModeEnabled').checked = !!settings.lr2ModeEnabled;
     document.getElementById('autoLaunch').checked = settings.autoLaunch || false;
     document.getElementById('showPromoBox').checked = !!settings.widget?.showPromoBox;
+    document.getElementById('transparent-container').checked = !!settings.widget?.transparentContainer;
+    updateContainerColorAvailability();
     document.getElementById('GlobalReleaseMALength').value = settings.widget?.globalMALength || 200;
     document.getElementById('PerButtonMALength').value = settings.widget?.perButtonMALength || 200;
 
-    toggleKeyMappingUI(settings.controllerProfile || 'PHOENIXWAN');
+    toggleKeyMappingUI(settings.controllerProfile || 'AUTO');
 
     if (settings.controllerProfile === 'KB') {
       const kbMap = settings.keyMapping?.KB || {};
@@ -110,8 +124,11 @@ function toggleKeyMappingUI(profile) {
         input.value = kbMap[action] || '';
       });
     }
+    const genericMap = settings.keyMapping?.GENERIC || {};
+    document.querySelectorAll('#generic-mapping-table input').forEach(input => input.value = genericMap[input.dataset.key] || '');
 
     const defaultColors = {
+      containerBackground: '#000000',
       background: '#000000',
       accent: '#444444',
       fontColor: '#cccccc',
@@ -123,6 +140,7 @@ function toggleKeyMappingUI(profile) {
       ...(settings.widget?.colors || {})
     };
 
+    document.getElementById('color-container-background').value = mergedColors.containerBackground;
     document.getElementById('color-background').value = mergedColors.background;
     document.getElementById('color-accent').value = mergedColors.accent;
     document.getElementById('color-fontColor').value = mergedColors.fontColor;
@@ -137,6 +155,7 @@ function toggleKeyMappingUI(profile) {
       previewImg.style.display = 'block';
     }
 
+    bindColorPreview('color-container-background', 'preview-container-background');
     bindColorPreview('color-background', 'preview-background');
     bindColorPreview('color-accent', 'preview-accent');
     bindColorPreview('color-fontColor', 'preview-fontColor');
@@ -159,6 +178,37 @@ document.getElementById('controllerProfile').addEventListener('change', async (e
   }
 });
 
+let learningInput = null;
+document.querySelectorAll('#generic-mapping-table input').forEach(input => {
+  input.addEventListener('focus', () => {
+    if (document.getElementById('controllerProfile').value !== 'AUTO') return;
+    learningInput = input;
+    document.getElementById('mapping-status').textContent = window.i18n.t('settings.listening', { key: getMappingLabel(input.dataset.key) });
+  });
+});
+window.electronAPI.onControllerData(events => {
+  if (!learningInput || document.getElementById('controllerProfile').value !== 'AUTO') return;
+  const event = events.find(item => item.type === 'physical-button' && item.pressed);
+  if (!event) return;
+  const key = learningInput.dataset.key;
+  learningInput.value = event.physicalButton;
+  learningInput = null;
+  document.getElementById('mapping-status').textContent = window.i18n.t('settings.mapped', { key: getMappingLabel(key), button: event.physicalButton });
+});
+
+function getMappingLabel(key) {
+  if (key === 'SCup') return window.i18n.t('settings.turntableClockwise');
+  if (key === 'SCdown') return window.i18n.t('settings.turntableCounterclockwise');
+  return window.i18n.t('settings.logicalKey', { key });
+}
+
+function localizeMappingLabels() {
+  document.querySelectorAll('#generic-mapping-table tr').forEach(row => {
+    const input = row.querySelector('input'); row.cells[0].textContent = getMappingLabel(input.dataset.key);
+  });
+}
+document.addEventListener('i18n-changed', localizeMappingLabels);
+
 
 // ✅ 키보드 키 입력 감지
 document.querySelectorAll('#key-mapping-table input').forEach(input => {
@@ -210,4 +260,12 @@ function bindColorPreview(inputId, previewId) {
 
   input.addEventListener('input', updatePreview);
   updatePreview(); // 초기 적용
-}
\ No newline at end of file
+}
+
+function updateContainerColorAvailability() {
+  const transparent = document.getElementById('transparent-container').checked;
+  document.getElementById('color-container-background').disabled = transparent;
+  document.getElementById('preview-container-background').style.opacity = transparent ? '0.35' : '1';
+}
+
+document.getElementById('transparent-container').addEventListener('change', updateContainerColorAvailability);
diff --git a/iidxwidget-app/renderer/settings/style.css b/iidxwidget-app/renderer/settings/style.css
index 660848e..7b2cfe1 100644
--- a/iidxwidget-app/renderer/settings/style.css
+++ b/iidxwidget-app/renderer/settings/style.css
@@ -90,4 +90,7 @@ body {
   font-weight: bold;
   margin-bottom: 10px;
   margin-top: 20px;
-}
\ No newline at end of file
+}
+.mapping-help { color: #aaa; font-size: 12px; line-height: 1.5; margin: 4px 0; }
+#mapping-status { min-height: 20px; color: #00c853; font-size: 13px; }
+#generic-mapping-table input { width: 100%; box-sizing: border-box; }
diff --git a/iidxwidget-app/renderer/shared/i18n.js b/iidxwidget-app/renderer/shared/i18n.js
new file mode 100644
index 0000000..4b0919a
--- /dev/null
+++ b/iidxwidget-app/renderer/shared/i18n.js
@@ -0,0 +1,33 @@
+(function () {
+  const ko = {
+    'settings.title':'설정','settings.app':'앱 기본 설정','settings.autoLaunch':'Windows 시작 시 자동 실행','settings.promo':'위젯 홍보 박스 표시','settings.controllerProfile':'컨트롤러 프로필','settings.auto':'자동 감지','settings.keyboard':'키보드','settings.apiToken':'beatmania.app 타건 기록 토큰','settings.apiPlaceholder':'웹사이트에서 발급받은 토큰 입력','settings.lr2':'LR2 모드 감지 (주작콘 전용)','settings.keyboardMapping':'키보드 매핑','settings.genericMapping':'AUTO 일반 컨트롤러 매핑','settings.genericHelp':'Auto-detect를 저장한 뒤 설정을 다시 열고, 각 필드를 클릭한 다음 원하는 컨트롤러 버튼을 누르세요. 마지막에 저장을 누르세요.','settings.logicalKey':'IIDX 키 {key}','settings.listening':'IIDX 키 {key}: 버튼 입력 대기 중...','settings.mapped':'IIDX 키 {key}에 물리 버튼 {button} 매핑 완료','settings.serverPort':'서버 포트','settings.websocketPort':'웹소켓 포트','settings.infoPosition':'세션 정보 표시 위치','settings.top':'상단','settings.bottom':'하단','settings.none':'없음','settings.buttonLayout':'버튼 레이아웃','settings.globalMA':'전체 Release 수집 표본 갯수 (수치가 높을수록 변화에 둔감)','settings.perButtonMA':'버튼별 Release 수집 표본 갯수 (수치가 높을수록 변화에 둔감)','settings.appearance':'위젯 외관 커스터마이징','settings.discImage':'스크래치 커스텀 이미지 업로드','settings.delete':'삭제','settings.background':'배경/스크래치 색상','settings.accent':'버튼/스크래치 입력 전 색상','settings.active':'버튼/스크래치 입력 시 색상','settings.font':'폰트/스크래치 가로선 색상','settings.save':'저장','settings.cancel':'저장하지 않고 종료','settings.invalidPort':'❗ 포트 번호는 1024 ~ 65535 사이여야 합니다.','settings.saved':'저장 완료! OBS의 브라우저 소스 속성에서 "현재 페이지의 캐시를 새로고침" 버튼을 눌러주세요!','chatter.title':'채터링 감지기','chatter.waiting':'데이터 수신 대기 중...','chatter.none':'아직 감지된 채터링 없음','chatter.count':'버튼 {button} : {count} 회','logs.title':'로그 보기'
+  };
+  const en = {
+    'settings.title':'Settings','settings.app':'Application settings','settings.autoLaunch':'Launch automatically with Windows','settings.promo':'Show widget promotion box','settings.controllerProfile':'Controller Profile','settings.auto':'Auto-detect','settings.keyboard':'Keyboard','settings.apiToken':'beatmania.app play-count token','settings.apiPlaceholder':'Enter the token issued by the website','settings.lr2':'Detect LR2 mode (dedicated controller only)','settings.keyboardMapping':'Keyboard mapping','settings.genericMapping':'AUTO generic controller mapping','settings.genericHelp':'Save Auto-detect, reopen Settings, click each field, and press the desired controller button. Press Save when finished.','settings.logicalKey':'IIDX key {key}','settings.listening':'IIDX key {key}: listening for a button...','settings.mapped':'Mapped physical button {button} to IIDX key {key}','settings.serverPort':'Server port','settings.websocketPort':'WebSocket port','settings.infoPosition':'Session information position','settings.top':'Top','settings.bottom':'Bottom','settings.none':'None','settings.buttonLayout':'Button layout','settings.globalMA':'Global release sample count (higher values react more slowly)','settings.perButtonMA':'Per-button release sample count (higher values react more slowly)','settings.appearance':'Widget appearance','settings.discImage':'Upload custom turntable image','settings.delete':'Delete','settings.background':'Background/turntable color','settings.accent':'Inactive button/turntable color','settings.active':'Active button/turntable color','settings.font':'Font/turntable line color','settings.save':'Save','settings.cancel':'Close without saving','settings.invalidPort':'❗ Port numbers must be between 1024 and 65535.','settings.saved':'Saved! In OBS browser source properties, click “Refresh cache of current page”.','chatter.title':'Chatter detector','chatter.waiting':'Waiting for data...','chatter.none':'No chatter detected yet','chatter.count':'Button {button}: {count}','logs.title':'Logs'
+  };
+  Object.assign(ko, {
+    'settings.containerBackground': '위젯 컨테이너 배경색',
+    'settings.transparentContainer': '위젯 컨테이너 배경 투명하게',
+    'settings.background': '스크래치 배경색',
+    'settings.turntableClockwise': '턴테이블 시계 방향',
+    'settings.turntableCounterclockwise': '턴테이블 반시계 방향',
+    'settings.listening': '{key}: 버튼 입력 대기 중...',
+    'settings.mapped': '{key}에 물리 버튼 {button} 매핑 완료'
+  });
+  Object.assign(en, {
+    'settings.containerBackground': 'Widget container background',
+    'settings.transparentContainer': 'Transparent container background',
+    'settings.background': 'Turntable background',
+    'settings.turntableClockwise': 'Turntable clockwise',
+    'settings.turntableCounterclockwise': 'Turntable counterclockwise',
+    'settings.listening': '{key}: listening for a button...',
+    'settings.mapped': 'Mapped physical button {button} to {key}'
+  });
+  let language = 'ko';
+  const normalize = value => value === 'en' ? 'en' : 'ko';
+  function t(key, values = {}) { return (en && (language === 'en' ? en[key] : null) || ko[key] || key).replace(/\{(\w+)\}/g, (_, k) => values[k] ?? `{${k}}`); }
+  function apply(next) { language = normalize(next); document.documentElement.lang = language; document.querySelectorAll('[data-i18n]').forEach(el => el.textContent = t(el.dataset.i18n)); document.querySelectorAll('[data-i18n-placeholder]').forEach(el => el.placeholder = t(el.dataset.i18nPlaceholder)); document.dispatchEvent(new CustomEvent('i18n-changed')); }
+  window.i18n = { t, apply, get language() { return language; } };
+  window.electronAPI?.getLanguage?.().then(apply);
+  window.electronAPI?.onLanguageChanged?.(apply);
+})();
diff --git a/iidxwidget-app/renderer/widget/index.html b/iidxwidget-app/renderer/widget/index.html
index 79c547c..91249cc 100644
--- a/iidxwidget-app/renderer/widget/index.html
+++ b/iidxwidget-app/renderer/widget/index.html
@@ -57,7 +57,7 @@
 
   <script src="index.js"></script>
   <script>
-    window.iidxapi.getAppVersion().then(version => {
+    window.iidxapi?.getAppVersion?.().then(version => {
       document.title = `IIDXwidget v${version} by Sadang`;
     });
   </script>
diff --git a/iidxwidget-app/renderer/widget/index.js b/iidxwidget-app/renderer/widget/index.js
index aabf959..916bc59 100644
--- a/iidxwidget-app/renderer/widget/index.js
+++ b/iidxwidget-app/renderer/widget/index.js
@@ -170,14 +170,31 @@ function applyKBIndicatorPosition(position) {
   kbIndicator.style.top = (position === 'top') ? '-26.8%' : '102%';
 }
 
+let webSocketReconnectTimer = null;
+
 function connectWebSocket(port) {
   const wsHost = location.hostname || '127.0.0.1';
   const ws = new WebSocket(`ws://${wsHost}:${port}`);
-  ws.onopen = () => console.log(`[WS] Connected to ws://${wsHost}:${port}`);
-  ws.onerror = (e) => console.error("[WS] Error", e);
+  ws.onopen = () => {
+    console.log(`[WS] Connected to ws://${wsHost}:${port}`);
+    if (webSocketReconnectTimer) clearTimeout(webSocketReconnectTimer);
+    webSocketReconnectTimer = null;
+  };
+  ws.onerror = (e) => console.error('[WS] Error', e);
+  ws.onclose = () => {
+    if (webSocketReconnectTimer) return;
+    webSocketReconnectTimer = setTimeout(() => {
+      webSocketReconnectTimer = null;
+      connectWebSocket(port);
+    }, 1000);
+  };
   ws.onmessage = (event) => {
-    const dataList = JSON.parse(event.data);
-    if (Array.isArray(dataList)) dataList.forEach(handleData);
+    try {
+      const dataList = JSON.parse(event.data);
+      if (Array.isArray(dataList)) dataList.forEach(handleData);
+    } catch (error) {
+      console.error('[WS] Invalid controller message', error);
+    }
   };
 }
 
@@ -215,7 +232,7 @@ function applyButtonLayout(layout) {
     applyPromoBox(settings);
     globalMALength = settings.widget.globalMALength || 200;
     perButtonMALength = settings.widget.perButtonMALength || 200;
-    applyCustomColors(settings.widget.colors);
+    applyCustomColors(settings.widget.colors, settings.widget.transparentContainer);
   }
 
   if (settings?.controllerProfile === 'KB') {
@@ -242,12 +259,14 @@ window.addEventListener('DOMContentLoaded', async () => {
   startUptimeTimer();
 });
 
-function applyCustomColors(colors) {
-  if (!colors) return;
-  document.documentElement.style.setProperty('--background-color', colors.background);
-  document.documentElement.style.setProperty('--accent-color', colors.accent);
-  document.documentElement.style.setProperty('--font-color', colors.fontColor);
-  document.documentElement.style.setProperty('--active-color', colors.activeColor);
+function applyCustomColors(colors, transparentContainer = false) {
+  colors = colors || {};
+  const containerBackground = transparentContainer ? 'transparent' : (colors.containerBackground || colors.background || '#000000');
+  document.documentElement.style.setProperty('--container-background-color', containerBackground);
+  document.documentElement.style.setProperty('--background-color', colors.background || '#000000');
+  document.documentElement.style.setProperty('--accent-color', colors.accent || '#444444');
+  document.documentElement.style.setProperty('--font-color', colors.fontColor || '#cccccc');
+  document.documentElement.style.setProperty('--active-color', colors.activeColor || '#ffffff');
 }
 
 function applyPromoBox(settings) {
@@ -299,4 +318,4 @@ window.addEventListener('keydown', (event) => {
         console.log(`[DEBUG] Count increased by 500. Current: ${totalKeyPresses}`);
     }
 });
-*/
\ No newline at end of file
+*/
diff --git a/iidxwidget-app/renderer/widget/style.css b/iidxwidget-app/renderer/widget/style.css
index e64f436..5244530 100644
--- a/iidxwidget-app/renderer/widget/style.css
+++ b/iidxwidget-app/renderer/widget/style.css
@@ -1,4 +1,5 @@
 :root {
+  --container-background-color: #000000;
   --background-color: #000000;
   --accent-color: #444444;
   --font-color: #cccccc;
@@ -20,7 +21,7 @@ body {
 }
 
 .container {
-  background: var(--background-color);
+  background: var(--container-background-color);
   padding: 25px 40px;
   border-radius: 20px;
   display: flex;
@@ -256,4 +257,4 @@ body {
   flex: 1;
   font-size: 22px;
   color: var(--font-color);
-}
\ No newline at end of file
+}
diff --git a/iidxwidget-app/settings.json b/iidxwidget-app/settings.json
index 4dc515b..05247ff 100644
--- a/iidxwidget-app/settings.json
+++ b/iidxwidget-app/settings.json
@@ -1,7 +1,8 @@
 {
   "serverPort": 8080,
   "webSocketPort": 5678,
-  "controllerProfile": "PHOENIXWAN",
+  "language": "ko",
+  "controllerProfile": "AUTO",
   "keyMapping": {
     "KB": {
       "SCup": "ShiftLeft",
@@ -13,10 +14,19 @@
       "5": "KeyJ",
       "6": "KeyK",
       "7": "KeyL"
-    }
+    },
+    "GENERIC": { "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "SCup": 8, "SCdown": 9 }
   },
   "widget": {
     "infoPosition": "bottom",
-    "buttonLayout": "1P"
+    "buttonLayout": "1P",
+    "transparentContainer": false,
+    "colors": {
+      "containerBackground": "#000000",
+      "background": "#000000",
+      "accent": "#444444",
+      "fontColor": "#cccccc",
+      "activeColor": "#ffffff"
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/iidxwidget-app/test/controllerReader.test.js b/iidxwidget-app/test/controllerReader.test.js
new file mode 100644
index 0000000..024c381
--- /dev/null
+++ b/iidxwidget-app/test/controllerReader.test.js
@@ -0,0 +1,40 @@
+const assert = require('assert');
+const { findExactDedicatedDevice, findAutoController, parseGenericControllerData, parseControllerData, createDedicatedParserState } = require('../controller/controllerReader');
+const phoenix = { path: 'phoenix', vendorId: 0x1CCF, productId: 0x8048, interface: 1, usagePage: 1 };
+const fps = { path: 'fps', vendorId: 0x1CCF, productId: 0x8048, interface: 0, usagePage: 1 };
+const arduino = { path: 'arduino', vendorId: 0x2341, productId: 0x8036, manufacturer: 'Arduino LLC', product: 'Arduino Leonardo', interface: 2, usagePage: 1, usage: 4 };
+const keyboard = { path: 'keyboard', usagePage: 1, usage: 6 };
+assert.equal(findAutoController([arduino]).device, arduino);
+assert.equal(findExactDedicatedDevice([arduino], 'PHOENIXWAN'), undefined);
+assert.equal(findExactDedicatedDevice([arduino], 'FPS EMP Gen2'), undefined);
+assert.equal(findAutoController([arduino, phoenix]).device, phoenix);
+assert.equal(findAutoController([arduino, fps]).device, fps);
+assert.equal(findAutoController([keyboard]), null);
+const neutral = Buffer.from([6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
+const button1 = Buffer.from([6,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
+const button2 = Buffer.from([6,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
+const state = { previousButtons: 0 };
+assert.deepEqual(parseGenericControllerData(neutral, { 1: 1 }, state), []);
+let events = parseGenericControllerData(button1, { 1: 1 }, state);
+assert.deepEqual(events.map(e => [e.type, e.physicalButton, e.pressed, e.button]), [['physical-button',1,true,undefined],['button',1,true,'button 1']]);
+events = parseGenericControllerData(neutral, { 1: 1 }, state);
+assert.deepEqual(events.map(e => [e.type, e.pressed]), [['physical-button',false],['button',false]]);
+events = parseGenericControllerData(button2, { 7: 2 }, state);
+assert.equal(events.find(e => e.type === 'button').button, 'button 7');
+const turntableState = { previousButtons: 0, currentDiscRaw: 128 };
+events = parseGenericControllerData(button1, { SCup: 1 }, turntableState);
+assert.deepEqual(events.map(e => e.type), ['physical-button', 'axis']);
+assert.equal(events[1].discRaw, 130);
+assert.equal(events[1].direction, '+');
+events = parseGenericControllerData(neutral, { SCup: 1 }, turntableState);
+assert.deepEqual(events.map(e => e.type), ['physical-button']);
+events = parseGenericControllerData(button2, { SCdown: 2 }, turntableState);
+assert.equal(events.find(e => e.type === 'axis').discRaw, 128);
+assert.equal(events.find(e => e.type === 'axis').direction, '-');
+assert.ok(!parseGenericControllerData.toString().includes('detectLR2Mode'));
+const report = Buffer.from([128, 0, 1]);
+const pState = createDedicatedParserState(), fState = createDedicatedParserState();
+assert.deepEqual(parseControllerData(report, pState).map(e => e.type), ['button','axis']);
+assert.deepEqual(parseControllerData(report, fState).map(e => e.type), ['button','axis']);
+assert.equal(findExactDedicatedDevice([keyboard], 'KB'), undefined);
+console.log('controllerReader tests passed');
diff --git a/iidxwidget-app/test/localization.test.js b/iidxwidget-app/test/localization.test.js
new file mode 100644
index 0000000..12fc33b
--- /dev/null
+++ b/iidxwidget-app/test/localization.test.js
@@ -0,0 +1,17 @@
+const assert = require('assert');
+const fs = require('fs');
+const { translations, normalizeLanguage, translate } = require('../localization/translations');
+assert.equal(normalizeLanguage(), 'ko');
+assert.equal(normalizeLanguage('invalid'), 'ko');
+assert.equal(translate('en', 'menu.settings'), 'Settings');
+translations.en.__fallbackTest = undefined; translations.ko.__fallbackTest = '한국어';
+assert.equal(translate('en', '__fallbackTest'), '한국어');
+['menu.main','menu.language','menu.settings','menu.logs','menu.checkUpdates','menu.restart','menu.quit','common.ok','update.availableTitle','settings.title','settings.controllerProfile','settings.genericMapping','settings.turntableClockwise','settings.turntableCounterclockwise','settings.containerBackground','settings.transparentContainer','readme.title','readme.obsSetup','readme.obsInstructions'].forEach(key => {
+  assert.notEqual(translate('ko', key), key); assert.notEqual(translate('en', key), key);
+});
+const main = fs.readFileSync(require.resolve('../main'), 'utf8');
+const setLanguageBody = main.slice(main.indexOf('function setLanguage'), main.indexOf('function restartApp'));
+assert.ok(!/startConfiguredController|restartApp|startServer|startWebSocketServer/.test(setLanguageBody));
+assert.ok(main.includes("case 'AUTO'"));
+for (const value of ['AUTO','PHOENIXWAN','FPS EMP Gen2','KB']) assert.ok(main.includes(value));
+console.log('localization tests passed');