AI‑generated Subtitles

import AtomicXCore

// Create an instance by room ID (multiple calls with the same room return the same instance)
let transcriberStore = AITranscriberStore.create(roomID: "your_room_id")

import 'package:atomic_x_core/api/ai/ai_transcriber_store.dart';

// Create an instance by room ID (multiple calls with the same room return the same instance)
final transcriberStore = AITranscriberStore.create("your_room_id");

import { useAITranscriberStateLive } from 'tuikit-atomicx-vue3';

// Called within the component's `setup` to retrieve state and action methods 
// (the same state is shared within the same room).
const {
  myLanguage,
  realtimeMessageList,
  isTranscriptionRunning,
  transcriptionConfig,
  startTranscription,
  updateTranscription,
  stopTranscription,
} = useAITranscriberStateLive();

// Subscribe to overall subtitle state
transcriberStore.state.subscribe { state in
    for message in state.realtimeMessageList {
        print("Speaker: \(message.speakerUserName)")
        print("Source text: \(message.sourceText)")
        for (lang, text) in message.translationTexts {
            print("Translation[\(lang)]: \(text)")
        }
    }
    print("Transcription running: \(state.isTranscriptionRunning)")
}

import 'package:atomic_x_core/api/ai/ai_transcriber_store.dart';

// Subscribe to real-time subtitle message list
transcriberStore.transcriberState.realtimeMessageList.addListener(() {
    final messages = transcriberStore.transcriberState.realtimeMessageList.value;
    for (final message in messages) {
        print("Speaker: ${message.speakerUserName}");
        print("Source text: ${message.sourceText}");
        message.translationTexts.forEach((lang, text) {
            print("Translation[$lang]: $text");
        });
    }
});

// Subscribe to transcription running status
transcriberStore.transcriberState.isTranscriptionRunning.addListener(() {
    final running = transcriberStore.transcriberState.isTranscriptionRunning.value;
    print("Transcription running: $running");
});

import { watch } from 'vue';
import { useAITranscriberStateLive } from 'tuikit-atomicx-vue3';

const {
  realtimeMessageList,
  isTranscriptionRunning,
} = useAITranscriberStateLive();

// Subscribe to the real-time subtitle message list.
watch(realtimeMessageList, (messages) => {
  messages.forEach((message) => {
    console.log(`Speaker: ${message.speakerUserName}`);
    console.log(`Source text: ${message.sourceText}`);
    Object.entries(message.translationTexts).forEach(([lang, text]) => {
      console.log(`Translation[${lang}]: ${text}`);
    });
  });
});

// Subscribe to transcribe running status
watch(isTranscriptionRunning, (running) => {
  console.log(`Transcription running: ${running}`);
});

import AtomicXCore

// 1. Configure transcription parameters: enable translation
let config = TranscriptionConfig(enableTranslation: true)

// 2. Start transcription, specifying source language as Chinese-English mixed
transcriberStore.startTranscription(myLanguage: .chineseEnglish, config: config) { error in
    if let error = error {
        print("Start transcription failed: \(error)")
    } else {
        print("Start transcription success")
    }
}

import 'package:atomic_x_core/api/ai/ai_transcriber_store.dart';

// 1. Configure transcription parameters: enable translation
final config = TranscriptionConfig(enableTranslation: true);

// 2. Start transcription, specifying source language as Chinese-English mixed
final result = await transcriberStore.startTranscription(
    SourceLanguage.chineseEnglish,
    config: config,
);

if (!result.isSuccess) {
    print("Start transcription failed: ${result.errorMessage}");
} else {
    print("Start transcription success");
}

import { useAITranscriberStateLive } from 'tuikit-atomicx-vue3';

const { startTranscription } = useAITranscriberStateLive();

// Enable transcription, specify the source language as mixed Chinese and English, and enable translation.
try {
  await startTranscription({
    myLanguage: 'zh_en',
    config: { enableTranslation: true },
  });
  console.log('Start transcription success');
} catch (error) {
  console.error('Start transcription failed:', error);
}

import AtomicXCore

// Switch source language to English and disable translation while running
var newConfig = TranscriptionConfig(enableTranslation: false)
transcriberStore.updateTranscription(myLanguage: .english, config: newConfig) { error in
    if let error = error {
        print("Update transcription failed: \(error)")
    }
}

import 'package:atomic_x_core/api/ai/ai_transcriber_store.dart';

// Switch source language to English and disable translation while running
final newConfig = TranscriptionConfig(enableTranslation: false);
final result = await transcriberStore.updateTranscription(
    SourceLanguage.english,
    config: newConfig,
);

if (!result.isSuccess) {
    print("Update transcription failed: ${result.errorMessage}");
}

import { useAITranscriberStateLive } from 'tuikit-atomicx-vue3';

const { updateTranscription } = useAITranscriberStateLive();

// Switch the source language to English while running, and turn off translation.
try {
  await updateTranscription({
    myLanguage: 'en',
    config: { enableTranslation: false },
  });
} catch (error) {
  console.error('Update transcription failed:', error);
}

import AtomicXCore

transcriberStore.stopTranscription { error in
    if let error = error {
        print("Stop transcription failed: \(error)")
    } else {
        print("Stop transcription success")
    }
}

import 'package:atomic_x_core/api/ai/ai_transcriber_store.dart';

final result = await transcriberStore.stopTranscription();

if (!result.isSuccess) {
    print("Stop transcription failed: ${result.errorMessage}");
} else {
    print("Stop transcription success");
}

import { useAITranscriberStateLive } from 'tuikit-atomicx-vue3';

const { stopTranscription } = useAITranscriberStateLive();

try {
  await stopTranscription();
  console.log('Stop transcription success');
} catch (error) {
  console.error('Stop transcription failed:', error);
}

import AtomicXCore

func setupAITranscriber(roomID: String) {
    // 1. Create instance
    let store = AITranscriberStore.create(roomID: roomID)

    // 2. Subscribe to subtitle state
    store.state.subscribe { state in
        for msg in state.realtimeMessageList {
            print("[\(msg.speakerUserName)] \(msg.sourceText)")
        }
    }

    // 3. Enable subtitles (with translation)
    let transConfig = TranscriptionConfig(enableTranslation: true)
    store.startTranscription(myLanguage: .chineseEnglish, config: transConfig) { error in
        if let error = error {
            print("start failed: \(error)")
        }
    }
}

import 'package:atomic_x_core/api/ai/ai_transcriber_store.dart';

Future<void> setupAITranscriber(String roomID) async {
    // 1. Create instance
    final store = AITranscriberStore.create(roomID);

    // 2. Subscribe to subtitle messages
    store.transcriberState.realtimeMessageList.addListener(() {
        final messages = store.transcriberState.realtimeMessageList.value;
        for (final msg in messages) {
            print("[${msg.speakerUserName}] ${msg.sourceText}");
        }
    });

    // 3. Enable subtitles (with translation)
    final transConfig = TranscriptionConfig(enableTranslation: true);
    final transResult = await store.startTranscription(
        SourceLanguage.chineseEnglish,
        config: transConfig,
    );
    if (!transResult.isSuccess) {
        print("start failed: ${transResult.errorMessage}");
    }
}

<script setup lang="ts">
import { ref } from 'vue';
import { useAITranscriberStateLive } from 'tuikit-atomicx-vue3';

const {
  realtimeMessageList,
  isTranscriptionRunning,
  startTranscription,
  updateTranscription,
  stopTranscription,
} = useAITranscriberStateLive();

const myLanguage = ref<'zh' | 'en' | 'ja' | 'ko'>('zh');
const enableTranslation = ref(true);
const loading = ref(false);

// Turn subtitles on / off
async function handleClick() {
  if (loading.value) {
    return;
  }
  loading.value = true;
  try {
    if (isTranscriptionRunning.value) {
      await stopTranscription();
    } else {
      await startTranscription({
        myLanguage: myLanguage.value,
        config: { enableTranslation: enableTranslation.value },
      });
    }
  } catch (error: any) {
    console.error('[AITranscriber] failed:', error);
  } finally {
    loading.value = false;
  }
}

// Dynamically switch the source language at runtime.
async function handleLanguageChange(next: typeof myLanguage.value) {
  myLanguage.value = next;
  if (isTranscriptionRunning.value) {
    await updateTranscription({
      myLanguage: next,
      config: { enableTranslation: enableTranslation.value },
    });
  }
}
</script>

<template>
  <div>
    <select
      :value="myLanguage"
      @change="handleLanguageChange(($event.target as HTMLSelectElement).value as any)"
    >
      <option value="zh">Chinese</option>
      <option value="en">English</option>
      <option value="ja">Japanese</option>
      <option value="ko">Korean</option>
    </select>

    <label>
      <input v-model="enableTranslation" type="checkbox" :disabled="isTranscriptionRunning" />
      Enable translation
    </label>

    <button :disabled="loading" @click="handleClick">
      {{ isTranscriptionRunning ? 'Stop subtitle' : 'Start subtitle' }}
    </button>

    <ul>
      <li
        v-for="msg in realtimeMessageList"
        :key="msg.segmentID"
      >
        <strong>{{ msg.speakerUserName || msg.speakerUserID }}：</strong>
        <span>{{ msg.sourceText }}</span>
        <em v-if="msg.translationTexts?.[myLanguage]">
          ({{ msg.translationTexts[myLanguage] }})
        </em>
      </li>
    </ul>
  </div>
</template>