平常API之圖靈聊天機器人

機器人是什麼？能夠吃嗎？

   嗯，他能夠和你聊天，不能吃哦。

首先須要到www.tuling123.com註冊一隻KEY，你才能調用機器人API哦

  1、佈局

（控制檯程序能夠跳過這一步）本文以WPF爲示例來說解。

首先咱們須要一隻聊天界面，大概須要這些組件：

「發送」Button一隻  TextBox一條   ScrollViewer和WrapPanel各一隻。

這裏我把它寫成UserControl方便使用，喵。

如下是XAML佈局:(ScrollViewer的Style能夠刪掉(若是報錯))

 1 <UserControl
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6              xmlns:local="clr-namespace:Lemon_App"
 7              xmlns:Forms="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Name="userControl" x:Class="Lemon_App.IMBOX"
 8              mc:Ignorable="d" Loaded="UserControl_Loaded"  SizeChanged="UserControl_SizeChanged">
 9     <Grid>
10         <Border Height="1" VerticalAlignment="Bottom" Background="#FFE6E6E6" Margin="0,0,0,90"/>
11         <TextBox x:Name="textBox1" TextWrapping="Wrap" FontSize="14" BorderThickness="0" BorderBrush="{x:Null}" SelectionBrush="#FF31C27C" KeyDown="textBox1_KeyDown" Height="90" VerticalAlignment="Bottom" Background="{x:Null}"/>
12         <Border BorderThickness="1" Background="#B2007ACC" CornerRadius="5" HorizontalAlignment="Right" Width="57" Height="30" VerticalAlignment="Bottom" Margin="3">
13             <Label x:Name="label" Content="發送" Margin="9.919,1.833,4.331,-1" Foreground="White" MouseDown="label_MouseDown" Height="27.167" VerticalAlignment="Top"/>
14         </Border>
15         <ScrollViewer x:Name="Sllv" PanningMode="Both" Margin="0,0,0,90" BorderBrush="{x:Null}" Template="{DynamicResource SCS}">
16             <WrapPanel x:Name="Robot" Height="Auto"  SizeChanged="Robot_SizeChanged" Width="{Binding ActualWidth, ElementName=userControl, Mode=OneWay}"/>
17         </ScrollViewer>
18     </Grid>
19 </UserControl>

部分事件處理代碼:

 1  public IMBOX()
 2         {
 3             InitializeComponent();
 4         }
 5 
 6         private void UserControl_Loaded(object sender, RoutedEventArgs e)
 7         {
 8             Robot.Width = this.ActualWidth;
 9         }
10   private void textBox1_KeyDown(object sender, KeyEventArgs e)
11         {
12             if (e.Key == Key.Enter)
13             {
14                 label_MouseDown(null, null);
15             }
16         }
17 
18         private void Robot_SizeChanged(object sender, SizeChangedEventArgs e)
19         {
20             double d = this.Sllv.ActualHeight + this.Sllv.ViewportHeight + this.Sllv.ExtentHeight;
21             this.Sllv.ScrollToVerticalOffset(d);
22         }
23 
24         private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
25         {
26             Robot.Width = this.ActualWidth;
27             foreach(var o in Robot.Children)
28             {
29                 (o as UserControl).Width = this.ActualWidth;
30             }
31         }
32 //以上負責自適應大小
33 private async void label_MouseDown(object sender, MouseButtonEventArgs e){
34   //待會處理機器人事件時用到
35 }

接着是聊天氣泡，能夠分爲機器人（在左邊）、本身（在右邊）如下是XAML：

機器人:(名稱及頭像能夠本身定義)

 1 <UserControl
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6              xmlns:local="clr-namespace:Lemon_App"
 7              x:Class="Lemon_App.Robot"
 8              mc:Ignorable="d" Height="Auto" Width="Auto">
 9     <Grid>
10 
11         <Border x:Name="Image" BorderThickness="0" HorizontalAlignment="Left" Margin="12,12,0,0" Width="30" CornerRadius="50" Height="30" VerticalAlignment="Top">
12             <Border.Background>
13                 <ImageBrush ImageSource="/Lemon App;component/Page/Lemon App Ico.ico"/>
14             </Border.Background>
15             <!--ed:RegularPolygon Fill="White" InnerRadius="0.47211" Margin="5" PointCount="5" Stretch="Fill"/!-->
16         </Border>
17         <Border Width="Auto" Height="Auto" Margin="55,35,0,0" CornerRadius="5" VerticalAlignment="Top" HorizontalAlignment="Left" Background="#FF3399FF">
18             <TextBlock x:Name="Te" Height="Auto" TextWrapping="Wrap" Width="Auto" d:LayoutOverrides="LeftPosition, RightPosition" Cursor="" Margin="6" Foreground="White" FontSize="14" Text="歡迎回來"/>
19         </Border>
20         <TextBlock Margin="50,15,40,35.78" TextWrapping="Wrap" Text="小萌機器人" Foreground="#FF2D2D30"/>
21         <Border HorizontalAlignment="Left" Height="16" Margin="46,38,0,0" VerticalAlignment="Top" Width="10" RenderTransformOrigin="0.5,0.5">
22             <Border.RenderTransform>
23                 <TransformGroup>
24                     <ScaleTransform/>
25                     <SkewTransform/>
26                     <RotateTransform Angle="-60"/>
27                     <TranslateTransform/>
28                 </TransformGroup>
29             </Border.RenderTransform>
30             <Path Data="M68.2,31.8c-2.3-2.3-6.1-2.3-8.4,0l-56,56C0,91.6,2.7,98,8,98h112c5.3,0,8-6.4,4.2-10.2L68.2,31.8z" Fill="#FF3399FF" Stretch="Fill" Margin="0,0,0,-2.912"/>
31         </Border>
32 
33     </Grid>
34 </UserControl>

事件處理代碼:

 1     public partial class Robot : UserControl
 2     {
 3         public Robot()
 4         {
 5             InitializeComponent();
 6             RenderOptions.SetBitmapScalingMode(Image, BitmapScalingMode.Fant);
 7         }
 8         public Robot(string Text)
 9         {
10             InitializeComponent();
11             Te.Text = Text;
12             RenderOptions.SetBitmapScalingMode(Image, BitmapScalingMode.Fant);
13         }
14     }

接下來是本身的XAML:

 1 <UserControl
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
 6              xmlns:local="clr-namespace:Lemon_App"
 7              x:Class="Lemon_App.User"
 8              mc:Ignorable="d" Height="Auto" Width="Auto" Loaded="UserControl_Loaded">
 9     <Grid>
10 
11         <Border x:Name="bd" BorderThickness="0" HorizontalAlignment="Right" Margin="0,12,12,0" Width="30" CornerRadius="50" Height="30" VerticalAlignment="Top" Background="#FF007ACC"/>
12         <Border Width="Auto" Height="Auto" Margin="0,35,55,0" CornerRadius="5" VerticalAlignment="Top" HorizontalAlignment="Right" Background="#FF3399FF">
13             <TextBlock x:Name="Te" Height="Auto" TextWrapping="Wrap" Width="Auto" d:LayoutOverrides="LeftPosition, RightPosition" Cursor="" Margin="6" Foreground="White" FontSize="14" Text="啦啦啦"/>
14         </Border>
15         <Grid HorizontalAlignment="Right" Height="18" Margin="0,16,45,0" VerticalAlignment="Top" Width="Auto">
16             <Grid.ColumnDefinitions>
17                 <ColumnDefinition Width="Auto"/>
18                 <ColumnDefinition Width="Auto"/>
19             </Grid.ColumnDefinitions>
20             <TextBlock x:Name="UName" Margin="0,0,1.636,0" TextWrapping="Wrap" Text="小萌機器人" Foreground="#FF2D2D30" HorizontalAlignment="Right" Width="Auto"/>
21         </Grid>
22         <Border HorizontalAlignment="Right" Height="16" Margin="0,38,46,0" VerticalAlignment="Top" Width="10" RenderTransformOrigin="0.5,0.5">
23             <Border.RenderTransform>
24                 <TransformGroup>
25                     <RotateTransform Angle="60"/>
26                     <TranslateTransform/>
27                 </TransformGroup>
28             </Border.RenderTransform>
29             <Path Data="M68.2,31.8c-2.3-2.3-6.1-2.3-8.4,0l-56,56C0,91.6,2.7,98,8,98h112c5.3,0,8-6.4,4.2-10.2L68.2,31.8z" Fill="#FF3399FF" Stretch="Fill" Margin="0,0,0,-2.912"/>
30         </Border>
31 
32     </Grid>
33 </UserControl>

事件處理代碼:

 1     public partial class User : UserControl
 2     {
 3         public User()
 4         {
 5             InitializeComponent();
 6         }
 7         public User(String Text)
 8         {
 9             InitializeComponent();
10             RenderOptions.SetBitmapScalingMode(bd, BitmapScalingMode.Fant);
11             Te.Text = Text;
12         }
13 
14         private void UserControl_Loaded(object sender, RoutedEventArgs e)
15         {
16             if (System.IO.File.Exists(He.Settings.UserImage))
17             {
18                 var image = new System.Drawing.Bitmap(He.Settings.UserImage);
19                 bd.Background = new ImageBrush(image.ToImageSource());
20             }
21             UName.Text = He.Settings.RobotName;
22         }
23     }

其中的He.Settings.UserImage能夠替換成你的圖像路徑，或直接在XAML中定義

2、編碼

咱們有了KEY就能夠向機器人發送請求惹：

http://www.tuling123.com/openapi/api?key={0}&info={1}&userid={2}

{0} : 你註冊的KEY

{1} : 對機器人說的話

{2} :（選填，但最好仍是填寫，用於辨認用戶）用戶名稱或ID

 

接下來就要對機器人發回的數據進行解碼

首先要識別他發回的是什麼類型的：（簡單的文本或連接）

狀態碼位於json數據的["code"]處

簡單的文本處理：

 1  if ((string)obj["code"] == "100000" || obj["code"].ToString() == "40002")
 2                 {
 3                     User U = new User(textBox1.Text)
 4                     {
 5                         Width = Robot.ActualWidth,Opacity = 0
 6                     };
 7                     Robot Rb = new Robot((string)obj["text"])
 8                     {
 9                         Width = Robot.ActualWidth, Opacity = 0
10                     };
11                     Robot.Children.Add(U);
12                     Robot.Children.Add(Rb);
13                     var b = new DoubleAnimation(1, TimeSpan.FromSeconds(0.2));
14                     U.BeginAnimation(OpacityProperty, b);
15                     Rb.BeginAnimation(OpacityProperty, b);
16                 }

連接處理:

 1  else if ((string)obj["code"] == "200000")
 2                 {
 3                     string i = (string)obj["text"];
 4                     User Uu = new User(textBox1.Text)
 5                     {
 6                         Opacity = 0,
 7                         Width = Robot.ActualWidth
 8                     };
 9                     Lemon_App.Robot Rbu = new Lemon_App.Robot((string)obj["url"] + i)
10                     {
11                         Opacity = 0,
12                         Width = Robot.ActualWidth,
13                         ToolTip = (string)obj["url"].ToString()
14                     };
15                     Rbu.MouseDown += Rbu_MouseDown;
16                     Robot.Children.Add(Uu);
17                     Robot.Children.Add(Rbu);
18                     var b = new DoubleAnimation(1, TimeSpan.FromSeconds(0.2));
19                     Uu.BeginAnimation(OpacityProperty, b);
20                     Rbu.BeginAnimation(OpacityProperty, b);
21                 }

附一隻事件處理代碼，用於處理用戶點擊連接時打開瀏覽器:

1        private void Rbu_MouseDown(object sender, MouseButtonEventArgs e)
2         {
3             Process.Start((sender as Grid).ToolTip.ToString());
4         }

這樣咱們就完成了編碼工做。

3、測試

接下來就能夠和機器人愉快地聊天啦o(*￣▽￣*)ブ

測試成功！( •̀ ω •́ )y

 

本教程示例代碼（WPF）：https://github.com/TwilightLemon/Lemon-App/tree/master/Lemon%20App/IApps/Robot

此次的教程到這裏就結束啦，若是喜歡就快快關注我吧！