Jan 30, 2025

2 min read

Deepseak vs GPT: The Battle of AI Interfaces

Published by

Abdul Rafay

Audio Content

Share this Blog Post:

While… While what? Today, we have a new AI model going wild on the internet, and it’s called Deepseak—the new thinking AI model that’s set to change everything! Will it take our jobs? Just kidding. But the future is here, and these new thinking models are truly fascinating. The ability to think independently is incredible.

But we’re here for something else—which one is better? By now, we’ve all seen the benchmarks, and they point to Deepseak (R1) outperforming ChatGPT (O1). But how much of a difference does this improvement make for us developers? And more importantly, how can we make money from it? (Because that’s what capitalists do—but that’s a topic for another day.)

For now, let’s talk about AI.

If you haven’t seen the benchmarks yet, check out the image below:

So, which AI is better for developers?

I mainly develop Android and iOS applications using Flutter, but sometimes I have to get my hands dirty with JavaScript. In the world of mobile development, UI is the main focus, and I suck at UI. You give me the logic, and I can write it down, but improving UI is something that I truly hate.

So, this is the test. I am working on an app called Meaning Mate, which has a section called the Quiz section. I have created a UI for the quiz, but it’s too simple. I will be asking both AI to improve the UI while keeping it professional and using the color scheme that I provided. I don’t want random colors in my app.

ChatGPT

Here in the Tab form, both the UI are provided, The first one is the UI that is codede by me and the other one is the UI that chatgpt provided.

Orginal Code
ChatGPT Code

1
import 'package:flutter/material.dart';
2

3
class Quizui extends StatelessWidget {
4
final String question;
5
final List<String> options;
6
final void Function(String) onOptionSelected;
7

8
const Quizui({
9
super.key,
10
required this.question,
11
required this.options,
12
required this.onOptionSelected,
13
});
14

15
@override
16
Widget build(BuildContext context) {
17
return Padding(
18
padding: const EdgeInsets.all(16.0),
19
child: Column(
20
crossAxisAlignment: CrossAxisAlignment.center,
21
children: [
22
Text(
23
question,
24
style: TextStyle(
25
fontSize: 20,
26
fontWeight: FontWeight.bold,
27
color: Theme.of(context).colorScheme.onSurface,
28
),
29
),
30
const SizedBox(height: 16),
31
...options.map(
32
(option) => Padding(
33
padding: const EdgeInsets.symmetric(vertical: 8.0),
34
child: SizedBox(
35
width: double.infinity,
36
child: ElevatedButton(
37
style: ElevatedButton.styleFrom(
38
foregroundColor: Theme.of(context).colorScheme.surface,
39
backgroundColor: Theme.of(context).colorScheme.primary,
40
padding: const EdgeInsets.symmetric(vertical: 14),
41
textStyle: TextStyle(
42
fontSize: 16,
43
color: Theme.of(context).colorScheme.primary,
44
),
45
elevation: 8,
46
shadowColor: Colors.black.withOpacity(0.3),
47
shape: RoundedRectangleBorder(
48
borderRadius: BorderRadius.circular(6),
49
),
50
),
51
onPressed: () => onOptionSelected(option),
52
child: Text(
53
option,
54
textAlign: TextAlign.center,
55
overflow: TextOverflow.ellipsis,
56
),
57
),
58
),
59
),
60
),
61
],
62
),
63
);
64
}
65
}

1
import 'package:flutter/material.dart';
2

3
class Quizui extends StatelessWidget {
4
  final String question;
5
  final List<String> options;
6
  final void Function(String) onOptionSelected;
7

8
  const Quizui({
9
    super.key,
10
    required this.question,
11
    required this.options,
12
    required this.onOptionSelected,
13
  });
14

15
  @override
16
  Widget build(BuildContext context) {
17
    return Scaffold(
18
      appBar: AppBar(
19
        title: const Text("Quiz Time!"),
20
        centerTitle: true,
21
      ),
22
      body: Padding(
23
        padding: const EdgeInsets.all(16.0),
24
        child: Card(
25
          elevation: 6,
26
          shape: RoundedRectangleBorder(
27
            borderRadius: BorderRadius.circular(16),
28
          ),
29
          child: Padding(
30
            padding: const EdgeInsets.all(16.0),
31
            child: Column(
32
              crossAxisAlignment: CrossAxisAlignment.center,
33
              children: [
34
                Text(
35
                  question,
36
                  style: Theme.of(context).textTheme.headlineSmall!.copyWith(
37
                        fontWeight: FontWeight.bold,
38
                        color: Theme.of(context).colorScheme.onSurface,
39
                      ),
40
                  textAlign: TextAlign.center,
41
                ),
42
                const SizedBox(height: 24),
43
                ...options.map(
44
                  (option) => Padding(
45
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
46
                    child: GestureDetector(
47
                      onTap: () => onOptionSelected(option),
48
                      child: Container(
49
                        decoration: BoxDecoration(
50
                          color: Theme.of(context).colorScheme.primary,
51
                          borderRadius: BorderRadius.circular(12),
52
                          boxShadow: [
53
                            BoxShadow(
54
                              color: Colors.black.withOpacity(0.1),
55
                              blurRadius: 6,
56
                              offset: const Offset(0, 3),
57
                            )
58
                          ],
59
                        ),
60
                        padding: const EdgeInsets.symmetric(
61
                          vertical: 16,
62
                          horizontal: 24,
63
                        ),
64
                        child: Row(
65
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
66
                          children: [
67
                            Expanded(
68
                              child: Text(
69
                                option,
70
                                style: Theme.of(context)
71
                                    .textTheme
72
                                    .bodyLarge!
73
                                    .copyWith(
74
                                      color: Theme.of(context)
75
                                          .colorScheme
76
                                          .onPrimary,
77
                                    ),
78
                                textAlign: TextAlign.left,
79
                                overflow: TextOverflow.ellipsis,
80
                              ),
81
                            ),
82
                            const Icon(
83
                              Icons.arrow_forward_ios_rounded,
84
                              color: Colors.white,
85
                              size: 18,
86
                            ),
87
                          ],
88
                        ),
89
                      ),
90
                    ),
91
                  ),
92
                ),
93
              ],
94
            ),
95
          ),
96
        ),
97
      ),
98
    );
99
  }
100
}

Screenshot

Here are the results

Original Code

ChatGPT Code

Observation

The UI is not as good as the original one, but it is still usable. The only problem is that the UI is too simple, and the colors are not consistent. I will try to improve the UI by adding more colors and making it more professional. Moreover, I don’t see the need for a big box in the UI, especially since the original UI doesn’t require one. But what can I say? I will be using the original UI.

Deepseak

Here is the Quiz UI code that I wrote:

Orginal Code
DeepSeak Code

1
import 'package:flutter/material.dart';
2

3
class Quizui extends StatelessWidget {
4
final String question;
5
final List<String> options;
6
final void Function(String) onOptionSelected;
7

8
const Quizui({
9
super.key,
10
required this.question,
11
required this.options,
12
required this.onOptionSelected,
13
});
14

15
@override
16
Widget build(BuildContext context) {
17
return Padding(
18
  padding: const EdgeInsets.all(16.0),
19
  child: Column(
20
    crossAxisAlignment: CrossAxisAlignment.center,
21
    children: [
22
      Text(
23
        question,
24
        style: TextStyle(
25
          fontSize: 20,
26
          fontWeight: FontWeight.bold,
27
          color: Theme.of(context).colorScheme.onSurface,
28
        ),
29
      ),
30
      const SizedBox(height: 16),
31
      ...options.map(
32
        (option) => Padding(
33
          padding: const EdgeInsets.symmetric(vertical: 8.0),
34
          child: SizedBox(
35
            width: double.infinity,
36
            child: ElevatedButton(
37
              style: ElevatedButton.styleFrom(
38
                foregroundColor: Theme.of(context).colorScheme.surface,
39
                backgroundColor: Theme.of(context).colorScheme.primary,
40
                padding: const EdgeInsets.symmetric(vertical: 14),
41
                textStyle: TextStyle(
42
                  fontSize: 16,
43
                  color: Theme.of(context).colorScheme.primary,
44
                ),
45
                elevation: 8,
46
                shadowColor: Colors.black.withOpacity(0.3),
47
                shape: RoundedRectangleBorder(
48
                  borderRadius: BorderRadius.circular(6),
49
                ),
50
              ),
51
              onPressed: () => onOptionSelected(option),
52
              child: Text(
53
                option,
54
                textAlign: TextAlign.center,
55
                overflow: TextOverflow.ellipsis,
56
              ),
57
            ),
58
          ),
59
        ),
60
      ),
61
    ],
62
  ),
63
);
64
}
65
}

1
import 'package:flutter/material.dart';
2

3
class Quizui extends StatelessWidget {
4
final String question;
5
final List<String> options;
6
final void Function(String) onOptionSelected;
7

8
const Quizui({
9
  super.key,
10
  required this.question,
11
  required this.options,
12
  required this.onOptionSelected,
13
});
14

15
@override
16
Widget build(BuildContext context) {
17
  return Scaffold(
18
    body: Container(
19
      decoration: BoxDecoration(
20
        gradient: LinearGradient(
21
          colors: [
22
            Theme.of(context).colorScheme.primary.withOpacity(0.8),
23
            Theme.of(context).colorScheme.secondary.withOpacity(0.8),
24
          ],
25
          begin: Alignment.topLeft,
26
          end: Alignment.bottomRight,
27
        ),
28
      ),
29
      child: Padding(
30
        padding: const EdgeInsets.all(16.0),
31
        child: Column(
32
          crossAxisAlignment: CrossAxisAlignment.center,
33
          children: [
34
            const SizedBox(height: 40),
35
            Hero(
36
              tag: 'question',
37
              child: Material(
38
                color: Colors.transparent,
39
                child: Text(
40
                  question,
41
                  style: TextStyle(
42
                    fontSize: 24,
43
                    fontWeight: FontWeight.bold,
44
                    color: Theme.of(context).colorScheme.onSurface,
45
                    shadows: [
46
                      Shadow(
47
                        color: Colors.black.withOpacity(0.3),
48
                        blurRadius: 4,
49
                        offset: const Offset(2, 2),
50
                      ),
51
                    ],
52
                  ),
53
                  textAlign: TextAlign.center,
54
                ),
55
              ),
56
            ),
57
            const SizedBox(height: 32),
58
            ...options.map(
59
              (option) => AnimatedButton(
60
                option: option,
61
                onPressed: () => onOptionSelected(option),
62
              ),
63
            ),
64
            const Spacer(),
65
            LinearProgressIndicator(
66
              value: 0.5, // Replace with actual progress
67
              backgroundColor: Colors.grey[300],
68
              valueColor: AlwaysStoppedAnimation<Color>(
69
                Theme.of(context).colorScheme.primary,
70
              ),
71
            ),
72
            const SizedBox(height: 16),
73
          ],
74
        ),
75
      ),
76
    ),
77
  );
78
}
79
}
80

81
class AnimatedButton extends StatefulWidget {
82
final String option;
83
final VoidCallback onPressed;
84

85
const AnimatedButton({
86
  super.key,
87
  required this.option,
88
  required this.onPressed,
89
});
90

91
@override
92
_AnimatedButtonState createState() => _AnimatedButtonState();
93
}
94

95
class _AnimatedButtonState extends State<AnimatedButton>
96
  with SingleTickerProviderStateMixin {
97
late AnimationController _controller;
98
late Animation<double> _scaleAnimation;
99

100
@override
101
void initState() {
102
  super.initState();
103
  _controller = AnimationController(
104
    vsync: this,
105
    duration: const Duration(milliseconds: 200),
106
  );
107
  _scaleAnimation = Tween<double>(begin: 1.0, end: 0.95).animate(
108
    CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
109
  );
110
}
111

112
@override
113
void dispose() {
114
  _controller.dispose();
115
  super.dispose();
116
}
117

118
void _onTapDown(TapDownDetails details) {
119
  _controller.forward();
120
}
121

122
void _onTapUp(TapUpDetails details) {
123
  _controller.reverse();
124
  widget.onPressed();
125
}
126

127
@override
128
Widget build(BuildContext context) {
129
  return GestureDetector(
130
    onTapDown: _onTapDown,
131
    onTapUp: _onTapUp,
132
    child: ScaleTransition(
133
      scale: _scaleAnimation,
134
      child: Padding(
135
        padding: const EdgeInsets.symmetric(vertical: 8.0),
136
        child: Container(
137
          width: double.infinity,
138
          decoration: BoxDecoration(
139
            gradient: LinearGradient(
140
              colors: [
141
                Theme.of(context).colorScheme.primary,
142
                Theme.of(context).colorScheme.secondary,
143
              ],
144
              begin: Alignment.topLeft,
145
              end: Alignment.bottomRight,
146
            ),
147
            borderRadius: BorderRadius.circular(12),
148
            boxShadow: [
149
              BoxShadow(
150
                color: Colors.black.withOpacity(0.3),
151
                blurRadius: 8,
152
                offset: const Offset(2, 2),
153
              ),
154
            ],
155
          ),
156
          child: ElevatedButton(
157
            style: ElevatedButton.styleFrom(
158
              foregroundColor: Theme.of(context).colorScheme.onPrimary,
159
              backgroundColor: Colors.transparent,
160
              shadowColor: Colors.transparent,
161
              padding: const EdgeInsets.symmetric(vertical: 16),
162
              shape: RoundedRectangleBorder(
163
                borderRadius: BorderRadius.circular(12),
164
              ),
165
            ),
166
            onPressed: widget.onPressed,
167
            child: Text(
168
              widget.option,
169
              textAlign: TextAlign.center,
170
              style: const TextStyle(
171
                fontSize: 18,
172
                fontWeight: FontWeight.bold,
173
              ),
174
            ),
175
          ),
176
        ),
177
      ),
178
    ),
179
  );
180
}
181
}

Screenshot

Here are the results

Original Code

DeepSeak Code

Observation

The UI is not as good as the original one, but it is still usable. The problem is that the UI has too many colors, like a rainbow. I can remove the colors and update it to fit my app’s theme. Here’s what I noticed: they don’t understand the theme and culture of the app, which is why they’re using rainbow colors.

Comparison

Now let’s compare the ChatGPT UI and Deepseak UI. To be honest, neither is good. I don’t know why both are lacking—one uses rainbow colors, and the other is just a box builder. I’m not sure why they aren’t able to create a better UI. I have used these tools in the past, and while they work some of the time, not always. Let’s see what happens.

Conclusion

Here is the conclusion: Both AI bots are not able to create a great UI, but they do provide usable ones. I will be using the Deepseak UI in my app because it provides more context and features that I can integrate into the application.

Both AI models have their own approach and flow for problem-solving, but sometimes they fall short. The advantage of Deepseak is that it is free and open-source, allowing you to deploy the model on your own machine and use it as you see fit without limits. However, ChatGPT is closed-source, requiring a subscription to access its APIs, which is frustrating for both developers and users.

Deepseak vs GPT: The Battle of AI Interfaces

So, which AI is better for developers?

ChatGPT

Screenshot

Original Code

ChatGPT Code

Observation

Deepseak

Screenshot

Original Code

DeepSeak Code

Observation

Comparison

Conclusion

Comments